Stats
Actions
Tags
From visual-documentation
Use when someone asks to create a flowchart, process diagram, decision tree, workflow diagram, sequence of steps, state machine, or wants to visualize a process, algorithm, or user journey. Triggers on: flowchart, process flow, workflow diagram, decision tree, process diagram, step-by-step flow, user journey, state machine, swim lane, sequence of steps, algorithm diagram.
How this skill is triggered — by the user, by Claude, or both
Slash command
/visual-documentation:flowchart-creatorThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Creates process flowcharts and workflow diagrams in **HTML**, **Mermaid**, or **DOT (Graphviz)** format.
Creates process flowcharts and workflow diagrams in HTML, Mermaid, or DOT (Graphviz) format. Pick the format that fits the rendering environment.
| Format | Best For | Output |
|---|---|---|
| HTML | Browser viewing, standalone shareable files, color-rich SVG flows | [name]-flowchart.html |
| Mermaid | GitHub README, Markdown docs, wikis, Notion, Obsidian | Fenced code block |
| DOT | Graphviz toolchains, complex decision graphs, PDF generation | [name]-flowchart.dot |
When the user does not specify a format: Ask: "Which format do you prefer — HTML (standalone file), Mermaid (for Markdown/GitHub), or DOT (Graphviz)?" Default to HTML if they have no preference.
Before writing any diagram code:
Do not generate until all items above are checked.
Read the reference for the chosen format before writing code:
references/html-flowcharts.mdreferences/mermaid-flowcharts.mdreferences/dot-flowcharts.mdApply semantic node colors consistently:
| Color | Meaning |
|---|---|
#48bb78 | Start node |
#e53e3e | End / terminal node |
#4299e1 | Process / action step |
#f59e0b | Decision / condition |
#9f7aea | External system / integration |
#718096 | Annotation / note |
Nodes: Start (rounded/green) → Process (rectangle/blue) → Decision (diamond/orange) → End (rounded/red)
Root → branches at each decision → leaf outcomes. All leaves must be labeled with outcomes.
Group steps by actor/system. Each lane = one actor/system. Edges cross lanes for handoffs.
States as nodes, transitions as labeled edges. Include initial state (filled circle) and terminal state.
See the format-specific reference file for syntax details.
npx claudepluginhub prakhar625/my-plugins --plugin visual-documentationGuides creation of syntactically correct Mermaid diagrams including flowcharts, sequence diagrams, class diagrams, state diagrams, Gantt charts, ER diagrams, and data lineage visualizations.
Generates Mermaid diagrams for flowcharts, sequences, states, classes, and architecture using semantic styling, shapes, and visual hierarchy.
Creates Mermaid diagrams for flowcharts, sequence diagrams, ERDs, architecture diagrams, and more. Provides styling, rendering instructions, and accessibility considerations.