Stats
Actions
Tags
From ce
Generates Mermaid diagrams for flowcharts, sequences, states, classes, and architecture using semantic styling, shapes, and visual hierarchy.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ce:visualizing-with-mermaidThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
**Default: Dark mode colors** from [references/color-palettes.md](references/color-palettes.md).
Default: Dark mode colors from references/color-palettes.md.
| Concept | Diagram Type |
|---|---|
| Process flows, decisions | Flowchart (TB direction) |
| API calls, message passing | Sequence diagram |
| Lifecycle states | State diagram |
| Data models, relationships | Class diagram or ERD |
| System architecture | Flowchart with subgraphs (LR direction) |
Do:
<br/> for longerDon't:
#000000) - too harsh, use dark grayLR (left-to-right): Pipelines, architecture diagrams TB (top-to-bottom): Hierarchies, decision flows
Use subgraphs for: deployment boundaries, logical layers, team ownership, trust boundaries.
npx claudepluginhub rileyhilliard/claude-essentials --plugin ceGuides creation of syntactically correct Mermaid diagrams including flowcharts, sequence diagrams, class diagrams, state diagrams, Gantt charts, ER diagrams, and data lineage visualizations.
Creates Mermaid diagrams for flowcharts, sequence diagrams, ERDs, architecture diagrams, and more. Provides styling, rendering instructions, and accessibility considerations.
Generates Mermaid diagrams for flowcharts, sequence diagrams, state diagrams, class diagrams, ERDs, and system architectures to visualize complex concepts and processes.