mermaid-architect_skill

Overview

This skill generates clean, hand-drawn-style Mermaid diagrams with robust, safe syntax and ELK-friendly layout choices. It produces Mermaid code blocks ready to paste into editors or renderers, plus a brief explanation of the diagram and layout decisions. Use it to convert textual process descriptions into professional, reproducible diagrams.

How this skill works

I parse the user's prompt for entities, steps, decisions, and relationships, then map those into Mermaid constructs (flowchart, sequence, class, or state). I apply rules like quoted node labels for special characters and safe node IDs without spaces. The output is a Mermaid code block using recommended direction (TD/LR) and optional subgraphs, followed by a compact rationale and rendering tips.

When to use it

• When you ask to "draw this", "make a diagram", or "visualize" a process
• Converting API call flows or user journeys into sequence diagrams
• Documenting system components or database models as class diagrams
• Mapping decision trees, processes, or lifecycles as flowcharts or state diagrams

Best practices

• Always provide step order and actor names for accurate sequence diagrams
• Include expected labels with commas, parentheses, or colons so I quote them correctly
• Specify preferred layout direction (TD or LR) for clearer structure
• Give explicit subgraph names and IDs when grouping components
• Keep node IDs alphanumeric or camelCase; avoid reserved IDs like end, graph, flowchart

Example use cases

• Visualize a microservice request flow into a sequence diagram with services and message types
• Create a top-down flowchart of a signup process with decisions and error paths
• Generate a class diagram for a simple domain model (User, Order, Product) with relationships
• Draw a state lifecycle for an order with transitions and terminal states