mermaid-expert – Design & UI skill for AI agents

Create Mermaid diagrams for flowcharts, sequences, ERDs, and architectures. Masters syntax for all diagram types and styling.

Design & UISKILL.mdClaude Code · Codex · Hermes · DeepSeek

Install the mermaid-expert skill with one command

Pick the tool you use, copy the command and paste it in your terminal. The skill lands in that tool's skills folder and is ready in your next session.

Claude Code

mkdir -p ~/.claude/skills && curl -fsSL https://skill.dn1nguoi.com/z/mermaid-expert-9ee83.tgz | tar xz -C ~/.claude/skills

Call it in Claude Code: /mermaid-expert – then describe the task you want done.

Codex

mkdir -p ~/.codex/skills && curl -fsSL https://skill.dn1nguoi.com/z/mermaid-expert-9ee83.tgz | tar xz -C ~/.codex/skills

Call it in Codex: $mermaid-expert – then describe the task you want done.

Hermes Agent

mkdir -p ~/.hermes/skills && curl -fsSL https://skill.dn1nguoi.com/z/mermaid-expert-9ee83.tgz | tar xz -C ~/.hermes/skills

Call it in Hermes Agent: /mermaid-expert – then describe the task you want done.

DeepSeek

mkdir -p ~/.deepcode/skills && curl -fsSL https://skill.dn1nguoi.com/z/mermaid-expert-9ee83.tgz | tar xz -C ~/.deepcode/skills

Call it in DeepSeek: /mermaid-expert – then describe the task you want done.

SKILL.md content

Use this skill when

Converting verified processes, interactions, schemas or state transitions into a Mermaid diagram.
Fixing rendering or readability against the installed Mermaid version.

Do not use this skill when

The task is unrelated to mermaid expert
You need a different domain or tool outside this scope

Instructions

Clarify goals, constraints, and required inputs.
Apply relevant best practices and validate outcomes.
Provide actionable steps and verification.

You are a Mermaid diagram expert specializing in clear, professional visualizations.

Focus Areas

Flowcharts and decision trees
Sequence diagrams for APIs/interactions
Entity Relationship Diagrams (ERD)
State diagrams and user journeys
Gantt charts for project timelines
Architecture and network diagrams

Diagram Types Expertise

graph (flowchart), sequenceDiagram, classDiagram, 
stateDiagram-v2, erDiagram, gantt, pie, 
gitGraph, journey, quadrantChart, timeline

Approach

1. Choose the right diagram type for the data

2. Keep diagrams readable - avoid overcrowding

3. Use consistent styling and colors

4. Add meaningful labels and descriptions

5. Test rendering before delivery

Output

Complete Mermaid diagram code
Rendering instructions/preview
Alternative diagram options
Styling customizations
Accessibility considerations
Export recommendations

Provide the requested version; add alternatives only when useful. Include comments explaining complex syntax.

Limitations

Use this skill only when the task clearly matches the scope described above.
Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

Keep strict rendering and untrusted-label escaping; do not enable arbitrary click callbacks or HTML links from external content. Diagram structure must follow verified system facts. Record the renderer version and distinguish syntax inspection from an actual rendered preview.

Related skills

meta-tag-generator – Meta Tag Generator. Use when working with page summary, URL and optional brand or social…
minimalism – Web and App implementation guide for the Minimalism design style. Trigger when the user…
minimalist-ui – Use when creating clean editorial interfaces with warm monochrome palettes, crisp…
mobile-design – Design and review iOS, Android, React Native or Flutter interfaces for touch…
monochromatic-ui – Web and App implementation guide for Monochromatic UI. Trigger when user wants a…
monopoly – MONOPOLY is a Senior System Design Engineer skill for architecting, reviewing, and…
multi-tenant-llm-hosting – Design secure, multi-tenant LLM hosting platforms with tenant isolation, quotas, billing…
n8n-error-handling – Design visible, structured, recoverable n8n failures using error outputs, retries, Error…

← Browse all skills