根据用户需求生成高质量的Mermaid图表代码。支持流程图、时序图、类图等20多种类型，涵盖从需求分析、语法查阅到代码生成及样式配置的全流程。
用户需要绘制流程图或架构图
用户要求将文本描述转换为可视化图表
用户询问特定Mermaid图表类型的语法
npx skills add WH-2099/mermaid-skill --skill mermaid -g -y
SKILL.md
Frontmatter
{
"name": "mermaid",
"metadata": {
"argument-hint": "[diagram description or requirements]"
},
"description": "Generate Mermaid diagrams from user requirements. Supports flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, and 18 more diagram types.",
"allowed-tools": "Read Write Edit"
}
Mermaid Diagram Generator
Generate high-quality Mermaid diagram code based on user requirements.
Workflow
- Understand Requirements: Analyze user description to determine the most suitable diagram type
- Read Documentation: Read the corresponding syntax reference for the diagram type
- Generate Code: Generate Mermaid code following the specification
- Apply Styling: Apply appropriate themes and style configurations
Diagram Type Reference
Select the appropriate diagram type and read the corresponding documentation:
| Type |
Documentation |
Use Cases |
| Flowchart |
flowchart.md |
Processes, decisions, steps |
| Sequence Diagram |
sequenceDiagram.md |
Interactions, messaging, API calls |
| Class Diagram |
classDiagram.md |
Class structure, inheritance, associations |
| State Diagram |
stateDiagram.md |
State machines, state transitions |
| ER Diagram |
entityRelationshipDiagram.md |
Database design, entity relationships |
| Gantt Chart |
gantt.md |
Project planning, timelines |
| Pie Chart |
pie.md |
Proportions, distributions |
| Mindmap |
mindmap.md |
Hierarchical structures, knowledge graphs |
| Timeline |
timeline.md |
Historical events, milestones |
| Git Graph |
gitgraph.md |
Branches, merges, versions |
| Quadrant Chart |
quadrantChart.md |
Four-quadrant analysis |
| Requirement Diagram |
requirementDiagram.md |
Requirements traceability |
| C4 Diagram |
c4.md |
System architecture (C4 model) |
| Sankey Diagram |
sankey.md |
Flow, conversions |
| XY Chart |
xyChart.md |
Line charts, bar charts |
| Block Diagram |
block.md |
System components, modules |
| Packet Diagram |
packet.md |
Network protocols, data structures |
| Kanban |
kanban.md |
Task management, workflows |
| Architecture Diagram |
architecture.md |
System architecture |
| Radar Chart |
radar.md |
Multi-dimensional comparison |
| Treemap |
treemap.md |
Hierarchical data visualization |
| User Journey |
userJourney.md |
User experience flows |
| ZenUML |
zenuml.md |
Sequence diagrams (code style) |
Configuration & Themes
Output Specification
Generated Mermaid code should:
- Be wrapped in ```mermaid code blocks
- Have correct syntax that renders directly
- Have clear structure with proper line breaks and indentation
- Use semantic node naming
- Include styling when needed to improve visual appearance
Example Output
flowchart TD
A[Start] --> B{Condition}
B -->|Yes| C[Execute]
B -->|No| D[End]
C --> D
User requirements: $ARGUMENTS
