npx claudepluginhub ansonphong/chapterwise-plugins --plugin chapterwise--- description: "Create Mermaid diagrams in Codex format" allowed-tools: Read, Grep, Glob, Bash, Write, Edit triggers: - diagram - mermaid - codex diagram - create diagram - mermaid codex - chapterwise:diagram argument-hint: "[diagram-type] [description]" --- # Chapterwise Diagram Content Type Create visual diagrams using [Mermaid.js](https://mermaid.js.org/) within Codex files. Mermaid supports 23 diagram types rendered client-side with dark mode support. ## Codex Output Formats ### 1. Inline Diagram (in Codex content) ### 2. External .mermaid Fil...
/diagramGenerates Mermaid diagrams from codebase analysis or descriptions. Supports flowcharts, sequences, classes, ER diagrams, graphs, and states. Outputs validated Markdown embeds.
/diagramGenerates focused architecture diagrams in Mermaid syntax from codebase components and relationships, with labeled data flows and optional legend. Saves to docs directory; limits to 15 nodes.
/diagramGenerates C4 architecture diagrams (context, container, component levels) from design documents in Mermaid, PlantUML, or C4 format. Outputs to docs/architecture/diagrams/. Supports --format, --level, --diagram_type options.
/diagramGenerates architecture diagrams in Mermaid or PlantUML C4 syntax using project context, requirements, and external docs. Specify type and subject, e.g., 'C4 context booking system'.
/diagramCreates diagrams (flowchart, mindmap, UML class/sequence, ER) on a Miro board from text descriptions or Mermaid/PlantUML notation.
/diagramGenerates technical diagrams, flowcharts, architectures, database schemas, and more from a text prompt. Supports --type, --style, --complexity, layout, colors, and annotations options.
Create visual diagrams using Mermaid.js within Codex files. Mermaid supports 23 diagram types rendered client-side with dark mode support.
content:
- key: system-flow
name: "System Architecture"
type: diagram
width: 1/1
value: |
flowchart TD
A[Client] --> B[API Gateway]
B --> C[Auth Service]
B --> D[Data Service]
content:
- key: er-model
type: diagram
width: 1/1
include: /diagrams/schema.mermaid
body: |
Here's the architecture:
```mermaid
flowchart LR
A --> B --> C
```
| Diagram Type | Keyword | Best For |
|---|---|---|
| Flowchart | flowchart TD | Process flows, decision trees, algorithms |
| Sequence | sequenceDiagram | API calls, service interactions |
| Class | classDiagram | Object models, domain models |
| State | stateDiagram-v2 | State machines, workflows, lifecycles |
| ER | erDiagram | Database schemas, data models |
| Gantt | gantt | Project timelines, schedules |
| Mindmap | mindmap | Brainstorming, concept maps |
| Timeline | timeline | Historical events, roadmaps |
| Git Graph | gitGraph | Branch strategies, release flows |
| Pie Chart | pie | Proportions, distributions |
| Architecture | architecture-beta | Cloud architecture, infrastructure |
| Quadrant | quadrantChart | Priority matrices, 2x2 frameworks |
| XY Chart | xychart-beta | Line/bar charts, data trends |
| Sankey | sankey-beta | Flow quantities, resource allocation |
| Block | block-beta | Simple system blocks |
Claude already knows Mermaid syntax. Focus on wrapping the output in the Codex format shown above, not on learning Mermaid.
Phosphor icons are registered as a Mermaid icon pack. Use the ph: prefix with any icon from phosphoricons.com.
Flowchart icon nodes:
flowchart LR
home@{ icon: "ph:house", label: "Home", form: "square" }
db@{ icon: "ph:database", label: "Database", form: "rounded" }
home --> db
Icon shape parameters: icon (required, "ph:icon-name"), label, form (square|circle|rounded), pos (t|b), h (min 48)
Architecture diagram with Phosphor icons:
architecture-beta
group backend(ph:cloud)[Backend]
service api(ph:plugs-connected)[API] in backend
service db(ph:database)[Database] in backend
api:B --> T:db
Common icons: ph:house, ph:gear, ph:users, ph:database, ph:shield-check, ph:cloud, ph:lightning, ph:chart-bar, ph:envelope, ph:globe, ph:lock, ph:robot, ph:code, ph:file-text, ph:credit-card
| Diagram Type | Width |
|---|---|
| Simple flowchart, pie chart | 1/2 or 1/3 |
| Complex flowchart, sequence, ER, gantt, mindmap, timeline | 1/1 |
type: diagram in content itemsph: prefix for Phosphor icons in flowchart and architecture diagramsA-->B should be A --> Bgraph vs flowchart)flowchart| Situation | Response |
|---|---|
| Invalid Mermaid syntax | "Mermaid syntax error — check for missing spaces around arrows or unquoted labels." |
| Unsupported diagram type | "Diagram type '{type}' is not supported by Mermaid. See supported types above." |
| File not found for include | "Diagram file not found: {path}" |
| Write permission denied | "Cannot write to {path} — check file permissions." |
Follow ${CLAUDE_PLUGIN_ROOT}/references/language-rules.md for all shared rules.
| Phase | Verb | Example |
|---|---|---|
| Start | Scanning | "Scanning requirements..." |
| Processing | Assembling | "Assembling {diagram_type} diagram..." |
| Completion | Done | "Done. Diagram added to {file}." |