mcpField
M
mermaid

mermaid

github.com/wh-2099Design & UI299174 installsUpdated 12w ago
Repository

About mermaid

mermaid is a skill that generates Mermaid diagram code from user requirements, selecting a diagram type and consulting its syntax reference. It covers diagrams ranging from flowcharts and sequences to charts and architecture views.

Key features

  1. 01Select a diagram type from requirements
  2. 02Consult type-specific syntax references
  3. 03Generate Mermaid code
  4. 04Apply themes and styling
  5. 05Format code for direct rendering

Use cases

  1. 01Diagram a process or decision flow
  2. 02Map API interactions or class structure
  3. 03Visualize timelines, data, or architecture

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/wh-2099/mermaid-skill --skill mermaid

After installing, type/mermaidin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
architecture.md
block.md
c4.md
classDiagram.md
config-configuration.md
config-directives.md
config-layouts.md
config-math.md
config-theming.md
config-tidy-tree.md
cynefin.md
entityRelationshipDiagram.md
eventmodeling.md
examples.md
flowchart.md
gantt.md
gitgraph.md
ishikawa.md
kanban.md
mindmap.md
packet.md
pie.md
quadrantChart.md
radar.md
railroad.md
requirementDiagram.md
sankey.md
sequenceDiagram.md
stateDiagram.md
swimlanes.md

Details

From the project README

Mermaid Diagram Generator

Generate high-quality Mermaid diagram code based on user requirements.

Workflow

  1. Understand Requirements: Analyze user description to determine the most suitable diagram type
  2. Read Documentation: Read the corresponding syntax reference for the diagram type
  3. Generate Code: Generate Mermaid code following the specification
  4. Apply Styling: Apply appropriate themes and style configurations

Diagram Type Reference

Select the appropriate diagram type and read the corresponding documentation:

TypeDocumentationUse Cases
Flowchartflowchart.mdProcesses, decisions, steps
Sequence DiagramsequenceDiagram.mdInteractions, messaging, API calls
Class DiagramclassDiagram.mdClass structure, inheritance, associations
State DiagramstateDiagram.mdState machines, state transitions
ER DiagramentityRelationshipDiagram.mdDatabase design, entity relationships
Gantt Chartgantt.mdProject planning, timelines
Pie Chartpie.mdProportions, distributions
Mindmapmindmap.mdHierarchical structures, knowledge graphs
Timelinetimeline.mdHistorical events, milestones
Git Graphgitgraph.mdBranches, merges, versions
Quadrant ChartquadrantChart.mdFour-quadrant analysis
Requirement DiagramrequirementDiagram.mdRequirements traceability
C4 Diagramc4.mdSystem architecture (C4 model)
Sankey Diagramsankey.mdFlow, conversions
XY ChartxyChart.mdLine charts, bar charts
Block Diagramblock.mdSystem components, modules
Packet Diagrampacket.mdNetwork protocols, data structures
Kanbankanban.mdTask management, workflows
Architecture Diagramarchitecture.mdSystem architecture
Radar Chartradar.mdMulti-dimensional comparison
Treemaptreemap.mdHierarchical data visualization
User JourneyuserJourney.mdUser experience flows
ZenUMLzenuml.mdSequence diagrams (code style)

Configuration & Themes

Output Specification

Generated Mermaid code should:

  1. Be wrapped in ```mermaid code blocks
  2. Have correct syntax that renders directly
  3. Have clear structure with proper line breaks and indentation
  4. Use semantic node naming
  5. 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

Comments

Markdown supported