Converts architecture descriptions, module specs, or workflow docs into Mermaid diagrams. Use when visualizing brick module relationships, workflows (DDD, investigation), or system architecture. Supports: flowcharts, sequence diagrams, class diagrams, state machines, entity relationship diagrams, an

Mermaid Diagram Generator Skill Purpose This skill automatically converts text descriptions of system architectures, module specifications, workflow documentation, and design concepts into valid Mermaid diagram syntax. It enables clear visual communication of complex systems, ensuring diagrams are production ready and embeddable in markdown documentation. When to Use This Skill Architecture Visualization : Convert architecture descriptions into flowcharts or block diagrams Module Relationships : Create diagrams showing how brick modules connect via their studs (public contracts) Workflow Documentation : Visualize workflow states, decisions, and transitions (DDD phases, investigation stages) System Design : Display system components, data flow, and interactions Sequence Diagrams : Show agent interactions, request/response patterns, or call sequences Class Hierarchies : Document module structure and class relationships State Machines : Model workflow states and valid transitions Entity Relationships : Display data model structures and relationships Timeline Planning : Create Gantt charts for project phases or milestones Supported Diagram Types 1. Flowcharts (Default) Best for: workflow sequences, decision trees, process flows, module relationships 2. Sequence Diagrams Best for: agent interactions, API calls, multi step processes, request/response patterns 3. Class Diagrams Best for: module structure, inheritance hierarchies, data models, component relationships 4. State Diagrams Best for: workflow states, state machines, workflow phases, condition based transitions 5. Entity Relationship Diagrams Best for: data models, database schemas, entity relationships 6. Gantt Charts Best for: project timelines, workflow phases, milestone planning Step by Step Generation Process Step 1: Understand the Source Material 1. Read the architecture description, spec, or workflow document 2. Identify the main entities or nodes 3. Determine how they relate or flow 4. Choose the appropriate diagram type Step 2: Identify Diagram Type Source Material Best Diagram Type Workflow steps, process flow Flowchart Module relationships, brick connections Flowchart or Class Diagram Agent interactions, call sequences Sequence Diagram States and transitions State Diagram Data models, entities Class Diagram or ERD Database schema ERD Project timeline Gantt Chart Complex hierarchies Class Diagram Step 3: Extract Entities and Relationships 1. List all nodes/entities from the source 2. Identify connections between them 3. Determine connection types (data flow, inheritance, calling, etc.) 4. Note any decision points or conditions Step 4: Generate Mermaid Syntax 1. Use appropriate Mermaid diagram declaration 2. Create nodes with descriptive labels 3. Draw connections with proper syntax 4. Add styling if needed for clarity 5. Ensure valid Mermaid syntax Step 5: Validate and Enhance 1. Ensure all entities are included 2. Verify connections are accurate 3. Add styling for important elements 4. Make diagram readable and not cluttered 5. Test syntax for validity Step 6: Document and Embed 1. Add title and description 2. Include explanation of diagram 3. Provide legend if needed 4. Embed in markdown with proper formatting Usage Examples Example 1: Architecture Description to Flowchart Input: Output: Example 2: Module Spec to Class Diagram Input: Output: Example 3: Workflow to State Diagram Input: Output: Example 4: Agent Interaction to Sequence Diagram Input: Output: Example 5: System Architecture to Flowchart Input: Output: Mermaid Syntax Reference Flowchart Nodes Flowchart Connections Styling Quality Checklist Before presenting a diagram, verify: [ ] All entities from source are included [ ] Connections accurately represent relationships [ ] Diagram type matches content (flowchart for flows, sequence for interactions, etc.) [ ] Labels are clear and descriptive [ ] No circular logic or dead ends (unless intentional) [ ] Mermaid syntax is valid [ ] Diagram is readable and not overly complex [ ] Decision points have clear yes/no paths [ ] Legend provided if needed for understanding [ ] Comments explain non obvious elements Common Patterns Brick Module Visualization Workflow Decision Tree Error Handling Flow Integration with Documentation Embedding in Markdown mermaid flowchart TD ... Key Components: Component A handles... Component B processes... markdown Include explanation before or after the diagram. Feedback and Improvement This skill evolves based on usage patterns: What types of diagrams are most useful? What features make diagrams clearer? What errors occur and how to prevent them? How can diagrams better support documentation? Document learnings and suggest improvements for ~/.amplihack/.claude/context/DISCOVERIES.md .

mermaid-diagram-generator