Stats
Actions
Tags
From jiffy-toolkit
Diagram standards for technical documentation including type selection, tool recommendations, color palettes (Material Design), WCAG 2.2 accessibility, legend requirements, and colorblind-safe alternatives. Use alongside visual-aid-recommender agent or when creating diagrams for any technical document.
How this skill is triggered — by the user, by Claude, or both
Slash command
/jiffy-toolkit:diagram-standardsThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Reference material for creating accessible, consistent, professional diagrams in technical documentation.
Reference material for creating accessible, consistent, professional diagrams in technical documentation.
| Document Type | Primary Tool | Reason |
|---|---|---|
| TechDocs/Backstage | Mermaid | Native MkDocs Material rendering |
| RFC (Google Docs) | Mermaid, PlantUML, D2 | All work with google-docs skill |
| Tutorial/Blog | Mermaid, D2 | Simple readable syntax |
| Architecture Doc | C4-PlantUML, Structurizr, D2 | Multi-level abstraction |
| Print/PDF | Any (SVG export) | SVG recommended for scalability |
| Component Type | Fill | Stroke | Text |
|---|---|---|---|
| Input/Data Source | #E3F2FD | #0D47A1 | #01579B |
| Processing/Transform | #FFF3E0 | #E65100 | #BF360C |
| Output/Result | #E8F5E9 | #1B5E20 | #1B5E20 |
| Storage/Database | #EDE7F6 | #311B92 | #4A148C |
| External/Infrastructure | #FAFAFA | #212121 | #212121 |
| Security/Critical | #FFEBEE | #B71C1C | #B71C1C |
For complete patterns with detailed examples, see the category files above.
npx claudepluginhub jonnycbb/claude-code-config --plugin jiffy-toolkitCreates technical and product diagrams (architecture, flowchart, sequence, etc.) as standalone HTML files with inline SVG. Includes style guide setup and 14 diagram types.
Generates Mermaid diagrams for flowcharts, sequences, states, classes, and architecture using semantic styling, shapes, and visual hierarchy.
Guides selection of diagram types (sequence, C4, ER, flowchart, etc.) and tools (Mermaid vs PlantUML) based on purpose like architecture, workflows, data. Use for visualization decisions.