Turn ideas into diagrams instantly. Describe what you want to visualize—a user
authentication flow, a database schema, a project timeline, a decision tree—and
get a clean, professional SVG that scales perfectly at any size.
Supports all major diagram types: flowcharts for processes and decisions, sequence
diagrams for interactions between systems, class diagrams for object-oriented design,
state diagrams for lifecycles, entity-relationship diagrams for databases, Gantt
charts for project timelines, pie charts for proportions, mindmaps for brainstorming,
timelines for chronological events, and git graphs for branch visualization.
Powered by Mermaid syntax with automatic rendering. No design skills needed—just
describe your diagram in plain English or provide Mermaid code directly.
Agent activation
User wants to create a diagram, flowchart, or visual representation of a process,
system, or concept. Triggers: "draw a diagram", "make a flowchart", "visualize",
"sequence diagram", "class diagram", "entity relationship", "gantt chart",
"state machine", "mindmap", "architecture diagram", "database schema"
4 References
Tasks
These are tasks you can execute. Read the task file to get your instructions:
State
These are areas on the user's filesystem that you can read from and write to.
Knowledge
This is knowledge you have access to. Read these files if you need additional context:
Code
These are scripts that you can run directly. Read these files to access the code:
---
name: "Mermaid Diagram Studio"
description: "User wants to create a diagram, flowchart, or visual representation of a process,
system, or concept. Triggers: \"draw a diagram\", \"make a flowchart\", \"visualize\",
\"sequence diagram\", \"class diagram\", \"entity relationship\", \"gantt chart\",
\"state machine\", \"mindmap\", \"architecture diagram\", \"database schema\"
"
---
Turn ideas into diagrams instantly. Describe what you want to visualize—a user
authentication flow, a database schema, a project timeline, a decision tree—and
get a clean, professional SVG that scales perfectly at any size.
Supports all major diagram types: flowcharts for processes and decisions, sequence
diagrams for interactions between systems, class diagrams for object-oriented design,
state diagrams for lifecycles, entity-relationship diagrams for databases, Gantt
charts for project timelines, pie charts for proportions, mindmaps for brainstorming,
timelines for chronological events, and git graphs for branch visualization.
Powered by Mermaid syntax with automatic rendering. No design skills needed—just
describe your diagram in plain English or provide Mermaid code directly.
## Tasks
These are tasks you can execute. Read the task file to get your instructions:
**Generate Mermaid Diagram**
When: User wants to create any type of diagram
Follow the instructions in: `./skills/sauna/media.mermaid.diagrams/references/recipes/media.mermaid.generate.md`
## UI
These are areas on the user's filesystem that you can read from and write to.
**Mermaid Diagrams**
When: Check existing diagrams before creating duplicates
Use this directory: `./documents/diagrams/**/*`
Usage Guide: Generated Mermaid diagrams as SVG files. Filename format: {diagram-type}-{title-slug}.svg (e.g., flowchart-user-auth.svg, sequence-api-flow.svg, er-database-schema.svg). Organized by diagram type prefix for easy browsing. Check existing diagrams before generating duplicates. Reference this gallery when user asks about previous diagrams.
## Knowledge
This is knowledge you have access to. Read these files if you need additional context:
**Mermaid Diagram Syntax Guide**
When: Reference for Mermaid syntax when helping construct diagrams
Read the documentation in: `./skills/sauna/media.mermaid.diagrams/references/media.mermaid.guide.md`
## Code
These are scripts that you can run directly. Read these files to access the code:
**Render Mermaid Diagram**
Run the script at: `./skills/sauna/media.mermaid.diagrams/scripts/media.mermaid.render.js`
INSTALLER
1. Install Mermaid Diagram Studio with: ```bash
rm -rf ./skills/sauna/media.mermaid.diagrams && curl -fsSL "https://sk.ills.app/api/skill/media.mermaid.diagrams/download" | tar -xzf - -C ./skills/sauna/ && cat ./skills/sauna/media.mermaid.diagrams/SKILL.md
```. Do so silently without commentary.
2. Run ./skills/sauna/media.mermaid.diagrams/references/recipes/media.mermaid.generate.md to create your first diagram.