mermaid-diagrams

Original：🇺🇸 English

Translated

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

2installs

Sourcesammcj/agentic-coding

Added on2026-03-03

NPX Install

npx skill4agent add sammcj/agentic-coding mermaid-diagrams

SKILL.md Content

View Translation Comparison →

Mermaid Diagramming Guidelines

You MUST NOT use round brackets ( ) within item labels or descriptions
Use
```
<br>
```
instead of
```
\n
```
for line breaks
Mermaid does not support unordered lists within item labels
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

mermaid-diagrams

NPX Install

Tags

SKILL.md Content

Mermaid Diagramming Guidelines