Mermaid Diagram Specialist
Turn architecture notes and workflows into copy-paste Mermaid diagrams in markdown for READMEs, ADRs, and onboarding docs.
Overview
Mermaid Diagram Specialist is an agent skill most often used in Build (also Validate scope and Launch distribution) that generates flowcharts, sequence diagrams, ERDs, and architecture Mermaid from your process and syste
Install
npx skills add https://github.com/davila7/claude-code-templates --skill mermaid-diagram-specialistWhat is this skill?
- Produces Mermaid in markdown: flowchart, sequence, ERD, C4, state, and related diagram types
- Maps architecture documentation, data models, and component interactions to the right diagram idiom
- Supports decision trees, user journeys, and process workflows for solo-builder specs
- Expects system description, entities, and layer boundaries as inputs—not hand-drawn assets
- Optional alignment with design-system colors for consistent doc sets
Adoption & trust: 926 installs on skills.sh; 27.8k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need trustworthy architecture and workflow visuals in repo docs but lack time to maintain separate drawing tools or inconsistent ASCII art.
Who is it for?
Indie builders documenting SaaS or API design in-repo who want fast, version-controlled diagrams from agent sessions.
Skip if: Pixel-perfect marketing creative, photo-heavy brand decks, or teams that mandate non-Mermaid proprietary diagram standards only.
When should I use this skill?
Creating architecture documentation; visualizing workflows and processes; documenting data models (ERDs); explaining sequence flows; creating state machines; documenting component relationships; creating decision trees;
What do I get? / Deliverables
You get paste-ready Mermaid diagram blocks in markdown that match the documented process, data model, or interaction you described.
- Mermaid diagram block(s) in markdown
- Diagram type matched to the documented artifact (flow, sequence, ERD, etc.)
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Documentation during implementation is the primary shelf; the same diagrams support validation sketches and launch explainers. Flowcharts, sequence diagrams, ERDs, C4, and state diagrams are textbook technical-doc outputs inside the build phase.
Where it fits
Add a sequence diagram to a README showing how your webhook handler calls the payment API.
ERD for Postgres tables before implementing migrations.
Decision-tree Mermaid to compare two MVP integration approaches.
User-journey flow for a launch blog post explaining the product.
How it compares
A focused diagram generator skill—not a full tech-writer persona or a wireframing/Figma replacement.
Common Questions / FAQ
Who is mermaid-diagram-specialist for?
Solo developers and small teams writing technical documentation who want Mermaid-native diagrams without learning every syntax edge case by trial and error.
When should I use mermaid-diagram-specialist?
Use it while building docs and architecture in Build, when scoping flows in Validate, or when preparing explainers for Launch—any time you need flowcharts, sequences, ERDs, C4 views, states, or user-journey maps as Mermaid markdown.
Is mermaid-diagram-specialist safe to install?
The skill is prose-and-template guidance without mandated tool execution; confirm upstream source trust via the Security Audits panel on this Prism page before install.
SKILL.md
READMESKILL.md - Mermaid Diagram Specialist
# Mermaid Diagram Specialist ## Overview **Purpose**: Expert in creating comprehensive Mermaid diagrams for documentation, architecture visualization, and process mapping **Category**: Tech **Primary Users**: tech-writer, architecture-validator, product-technical, tech-lead ## When to Use This Skill - Creating architecture documentation - Visualizing workflows and processes - Documenting data models (ERDs) - Explaining sequence flows - Creating state machines - Documenting component relationships - Creating decision trees - Visualizing user journeys ## Prerequisites **Required:** - Understanding of the system/process to document - Access to technical specifications - Knowledge of diagram type needed **Optional:** - Design system colors for consistency - Existing documentation to reference ## Input **What the skill needs:** - Process/system description - Entities and relationships (for ERDs) - Component interactions (for sequence diagrams) - Architecture layers (for C4 diagrams) - States and transitions (for state diagrams) ## Workflow ### Step 1: Diagram Type Selection **Objective**: Choose appropriate diagram type for requirements **Available Diagram Types:** 1. **Flowchart**: Decision flows, algorithms, processes 2. **Sequence Diagram**: API interactions, message flows 3. **ERD**: Database schemas, entity relationships 4. **Class Diagram**: Object-oriented design 5. **State Diagram**: State machines, lifecycle 6. **Gantt Chart**: Project timelines, schedules 7. **C4 Diagram**: Architecture at different levels 8. **Pie/Bar Charts**: Data visualization 9. **Git Graph**: Version control flows 10. **User Journey**: User experience flows **Decision Matrix:** - Process with decisions → **Flowchart** - API/system interactions → **Sequence Diagram** - Database structure → **ERD** - System architecture → **C4 Diagram** - Object relationships → **Class Diagram** - State transitions → **State Diagram** - Project timeline → **Gantt Chart** **Validation:** - [ ] Diagram type matches content - [ ] Complexity appropriate - [ ] Audience considered - [ ] Purpose clear **Output**: Selected diagram type ### Step 2: Flowchart Creation **Objective**: Create process and decision flow diagrams **Syntax:** ```mermaid flowchart TD Start([Start]) --> Input[/User Input/] Input --> Validate{Valid?} Validate -->|Yes| Process[Process Data] Validate -->|No| Error[Show Error] Error --> Input Process --> Save[(Save to DB)] Save --> Success[/Success Response/] Success --> End([End]) ``` **Node Shapes:** - `[Rectangle]` - Process step - `([Rounded])` - Start/End - `{Diamond}` - Decision - `[/Parallelogram/]` - Input/Output - `[(Database)]` - Data storage - `((Circle))` - Connector **Direction Options:** - `TD` - Top to Down - `LR` - Left to Right - `BT` - Bottom to Top - `RL` - Right to Left **Example - Booking Flow:** ```mermaid flowchart TD Start([User Initiates Booking]) --> CheckDates[Check Date Availability] CheckDates --> Available{Dates Available?} Available -->|No| ShowError[/Show Unavailable Message/] ShowError --> End([End]) Available -->|Yes| CreateBooking[Create Pending Booking] CreateBooking --> Payment[Process Payment] Payment --> PaymentSuccess{Payment Success?} PaymentSuccess -->|No| CancelBooking[Cancel Booking] CancelBooking --> ShowError PaymentSuccess -->|Yes| ConfirmBooking[Confirm Booking] ConfirmBooking --> SendEmail[/Send Confirmation Email/] SendEmail --