mcpField
M
mermaid-diagrams

mermaid-diagrams

github.com/sammcjDesign & UI167121 installsUpdated 3d ago
Repository

About mermaid-diagrams

A set of formatting and styling guidelines for Mermaid diagrams, intended for people creating flowcharts, state diagrams, and class diagrams. It covers quoting special labels, line breaks, and a colour theme.

Key features

  1. 01Quoting rules for special-character labels
  2. 02Line-break guidance for diagram labels
  3. 03Themes for flowcharts, state, and class diagrams
  4. 04Reusable colour class definitions

Use cases

  1. 01Write diagram labels containing parentheses
  2. 02Apply consistent colours to Mermaid diagrams
  3. 03Document flows, states, or classes

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/sammcj/agentic-coding --skill mermaid-diagrams

After installing, type/mermaid-diagramsin Claude Code to confirm it loaded.

Details

From the project README

Mermaid Diagramming Guidelines

  • Wrap any label containing parentheses or other special characters in double quotes, e.g. id1["Send request (POST)"]; unquoted parentheses break parsing
  • Use <br> instead of \n for line breaks
  • Mermaid does not support unordered lists within item labels
  • For flowchart, state and class diagrams, apply this colour theme unless specified otherwise:
classDef inputOutput fill:#F5F5F5,stroke:#9E9E9E,color:#616161
classDef llm fill:#E8EAF6,stroke:#7986CB,color:#3F51B5
classDef components fill:#F3E5F5,stroke:#BA68C8,color:#8E24AA
classDef process fill:#E0F2F1,stroke:#4DB6AC,color:#00897B
classDef stop fill:#FFEBEE,stroke:#E57373,color:#D32F2F
classDef data fill:#E3F2FD,stroke:#64B5F6,color:#1976D2
classDef decision fill:#FFF3E0,stroke:#FFB74D,color:#F57C00
classDef storage fill:#F1F8E9,stroke:#9CCC65,color:#689F38
classDef api fill:#FFF9C4,stroke:#FDD835,color:#F9A825
classDef error fill:#FFCDD2,stroke:#EF5350,color:#C62828

Comments

Markdown supported