Mermaid Diagramming Guidelines

SkillDev tools

Use the mermaid-diagrams skill whenever you are creating or updating mermaid diagrams. Provides guidance on mermaid best practices.

Available today. Use it from your connected AI after setup.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the Mermaid Diagramming Guidelines skill

What this skill tells your AI

The instructions your AI receives, as published by sammcj/agentic-coding in Skills/mermaid-diagrams/SKILL.md and read by ahel’s review.

  • 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

Signals

GitHub stars
160
Forks
25
Last commit
Sep 2026
Advanced
Catalog kind
skill
Gateway key
mermaid-diagrams-sammcj
Source
github.com/sammcj/agentic-coding