Provides comprehensive guidance for creating Mermaid diagrams. Mermaid is a JavaScript-based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development. Mermaid is particularly well-suited for use in Markdown documents, GitHub, GitLab, wikis, blogs, and other Markdown-based platforms. Use when the user wants to draw, create, generate, make, build, or visualize any diagram, chart, graph, flowchart, architecture diagram, sequence diagram, class diagram, state diagram, Gantt chart, mindmap, timeline, or any other visual diagram in Markdown-friendly format. This skill covers all 23+ Mermaid diagram types including flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, pie charts, quadrant charts, Git graphs, C4 diagrams, mindmaps, timelines, and more. Always use this skill when the user mentions Mermaid, needs diagrams for Markdown documentation, or wants quick diagrams that render directly in Markdown renderers.
View on GitHubpartme-ai/full-stack-skills
development-skills-utils
February 1, 2026
Select agents to install to:
npx add-skill https://github.com/partme-ai/full-stack-skills/blob/main/skills/mermaid/SKILL.md -a claude-code --skill mermaidInstallation paths:
.claude/skills/mermaid/## When to use this skill **ALWAYS use this skill when the user mentions:** - Drawing, creating, generating, making, or building any diagram, chart, or graph - Visualizing processes, workflows, systems, architectures, or data - Any request to "画图" (draw diagram), "绘图" (draw chart), "生成图" (generate diagram), "创建图" (create diagram) - Flowcharts, sequence diagrams, class diagrams, state diagrams, or any diagram type - Architecture diagrams, system diagrams, or design diagrams - Data visualization, charts, or graphs - Process flows, workflows, or business processes - Project timelines, schedules, or Gantt charts - User journeys, mindmaps, or hierarchical structures - Database schemas, ER diagrams, or entity relationships - Git branching structures or version control diagrams - Any visual representation or diagrammatic content **Trigger phrases include:** - "画一个图" (draw a diagram), "画流程图" (draw flowchart), "画架构图" (draw architecture diagram) - "创建一个图表" (create a chart), "生成一个图" (generate a diagram) - "帮我画" (help me draw), "给我画" (draw for me), "画出来" (draw it out) - "用图表示" (represent with diagram), "可视化" (visualize), "画个图说明" (draw a diagram to explain) - "流程图" (flowchart), "时序图" (sequence diagram), "类图" (class diagram), "状态图" (state diagram) - "架构图" (architecture diagram), "系统图" (system diagram), "设计图" (design diagram) - "甘特图" (Gantt chart), "思维导图" (mindmap), "时间线" (timeline) - "用 Mermaid" (use Mermaid), "Mermaid 画图" (draw with Mermaid), "Mermaid 语法" (Mermaid syntax) - Any mention of "diagram", "chart", "graph", "flowchart", "visualization", "drawing", "Mermaid" **IMPORTANT: Mermaid vs PlantUML - Two Different Diagramming Tools:** Mermaid and PlantUML are two different diagramming tools with different purposes: - **Mermaid**: A JavaScript-based diagramming tool designed for Markdown documentation. It uses Markdown-inspired syntax and renders directly in Markdown renderers (GitHub, GitLab, wikis, blogs). Best for quick diagrams, Markdown documentation, and simple visual
Issues Found: