Agent skill
mermaid
Render Mermaid diagrams as ASCII/Unicode art or SVG
Install this agent skill to your Project
npx add-skill https://github.com/genomewalker/cc-soul/tree/main/skills/mermaid
SKILL.md
Mermaid Diagrams
[mermaid] visualize→ASCII|SVG | via beautiful-mermaid
supported: flowchart, state, sequence, class, ER
output: terminal-friendly ASCII or SVG file
themes: 15 built-in (tokyo-night, github-dark, etc.)
Usage
When user asks for a diagram, architecture visualization, or flowchart:
- Write the Mermaid code based on their description
- Render as ASCII for immediate terminal display
- Optionally save SVG if user wants a file
Mermaid Syntax Quick Reference
Flowchart
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Action]
B -->|No| D[End]
Sequence Diagram
sequenceDiagram
Alice->>Bob: Hello
Bob-->>Alice: Hi back
State Diagram
stateDiagram-v2
[*] --> Idle
Idle --> Processing: start
Processing --> Done: complete
Done --> [*]
Class Diagram
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal : +int age
Animal : +isMammal()
ER Diagram
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
Rendering
Use the mermaid-render script to render diagrams:
# ASCII output (terminal)
mermaid-render ascii "graph LR; A --> B --> C"
# SVG output (file)
mermaid-render svg "graph TD; A --> B" output.svg
# With theme
mermaid-render svg "graph TD; A --> B" output.svg --theme tokyo-night
Available Themes
- tokyo-night (default)
- github-dark
- github-light
- dracula
- monokai
- nord
- one-dark
- solarized-dark
- solarized-light
- gruvbox-dark
- gruvbox-light
- catppuccin-mocha
- catppuccin-latte
- rose-pine
- rose-pine-dawn
Process
- Understand the request - What needs to be visualized?
- Choose diagram type - flowchart, sequence, state, class, or ER
- Write Mermaid code - Use proper syntax
- Render - Show ASCII in response, offer SVG if complex
Example
User: "Show me the hook lifecycle"
graph TD
A[SessionStart] --> B[UserPromptSubmit]
B --> C{Tool Call?}
C -->|Yes| D[PreToolUse]
D --> E[Tool Executes]
E --> F{Success?}
F -->|Yes| G[PostToolUse]
F -->|No| H[PostToolUseFailure]
G --> I{More Tools?}
H --> I
I -->|Yes| C
I -->|No| J[Stop]
Then render as ASCII for terminal display.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
kriya
Review soul discoveries (fixes, improvements, corrections) one by one, accept or discard each, implement accepted ones, build chitta, and optionally release.
cc-soul-daemon
Start, stop, or check the chittad daemon
ultrathink
First-principles deep thinking for significant problems
reawaken
Restore context and momentum via Pratyabhijñā (recognition)
long-task
Initialize or resume a long-running task session. Use when starting a complex multi-session task, resuming work from a previous session, or when the user mentions claude-progress.json or long-running work.
shepherd
Autonomous pipeline monitor using sense-think-act loop. Watches snakemake/nextflow jobs, detects errors, applies fixes from memory, restarts on failure.
Didn't find tool you were looking for?