Mermaid Diagram Studio
skill icon Skill
Mermaid Diagram Studio
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.
Available Tasks
Memory Locations

State

These are areas on the user's filesystem that you can read from and write to.

Show More
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"
                    ---
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`



## State

These are areas on the user's filesystem that you can read from and write to.

**Generated Images**
When: Check existing diagrams in category: diagrams
Use this directory: `documents/media/images/[category]/**/*`
Usage Guide: All AI-generated images organized by category.
Category naming: lowercase-hyphenated (e.g., hr-visuals, diagrams, storyboards). Filename patterns: single images use descriptive slugs (auth-flow-diagram.png); multi-file projects nest with semantic names (my-comic/panel-1.png).
Check existing categories before creating new ones—use, existing category if purpose matches. PNG preferred; other formats allowed for specific use cases. Keep recent files unless task specifies otherwise.

                  
                    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.