From diagrams
Shared design principles for all diagram formats -- color theory, composition, typography, accessibility, and quality standards. Referenced by format-specific skills (svg, mermaid, excalidraw, d2). Use when generating any visual diagram to ensure professional quality.
npx claudepluginhub zate/cc-plugins --plugin diagramsThis skill uses the workspace's default tool permissions.
Universal design principles for professional-quality diagrams. These rules apply regardless of output format (SVG, Mermaid, Excalidraw, D2). Format-specific skills handle syntax; this skill handles aesthetics and composition.
Generates standalone HTML files with inline SVG for 13 diagram types: architecture, flowcharts, sequences, state machines, ERDs, timelines, swimlanes, quadrants, trees, and more. Customizable style guide with first-run onboarding.
Generates 13 types of editorial-quality HTML+SVG diagrams (architecture, flowcharts, sequences, ER models, timelines) for blog posts and documentation with brand-matched styling and no external dependencies.
Generates Mermaid diagrams for flowcharts, sequences, states, classes, and architecture using semantic styling, shapes, and visual hierarchy.
Share bugs, ideas, or general feedback.
Universal design principles for professional-quality diagrams. These rules apply regardless of output format (SVG, Mermaid, Excalidraw, D2). Format-specific skills handle syntax; this skill handles aesthetics and composition.
Use 3-5 colors plus grays per diagram. Maximum 7 distinct colors. Beyond that, humans cannot distinguish and remember meanings. If you need more categories, use shade variations within a hue family rather than adding new hues.
Use color to convey meaning, not decoration. These associations are widely understood in software engineering:
| Concept | Color | Light Theme Hex | Use For |
|---|---|---|---|
| Platform / Core | Blue | #2563EB | Primary system components, APIs, services |
| Data / Storage | Blue (darker) | #1E40AF | Databases, data stores, caches |
| Success / Healthy | Green | #16A34A | Active states, successful flows, admin |
| Security / Error | Red | #DC2626 | Threats, errors, denied paths, trust boundaries |
| Warning / Caution | Amber | #D97706 | Deprecations, risks, attention needed |
| Compute / Processing | Purple | #7C3AED | Processing nodes, AI/ML, observability |
| External / Third-Party | Teal | #0891B2 | External systems, integrations, users |
| Inactive / Deprecated | Gray | #6B7280 | Disabled, archived, low-priority |
| Infrastructure | Slate | #475569 | Foundational platform, network |
8% of males have color vision deficiency. Always follow these rules:
#648FFF, #785EF0, #DC267F, #FE6100, #FFB000#E69F00, #56B4E9, #009E73, #F0E442, #0072B2, #D55E00, #CC79A7Design for light theme by default (white/light gray background). Most documentation, presentations, and print uses light backgrounds.
| Element | Light Theme | Dark Theme |
|---|---|---|
| Background | #FFFFFF or #F8FAFC | #0F172A or #1E293B |
| Primary text | #1E293B | #F1F5F9 |
| Secondary text | #64748B | #94A3B8 |
| Node fill | Light pastels | Muted darks |
| Node stroke | Medium tones | Slightly brighter |
| Connectors | #94A3B8 | #475569 |
| Element | Spacing |
|---|---|
| Between peer nodes | 40-60px |
| Padding inside nodes | 12-16px |
| Padding inside groups/containers | 20-30px |
| Gap between node and connector label | 8px |
| Edge routing clearance from unconnected nodes | >= 10px |
| Diagram margins | 40px+ |
Rule: All gaps of the same semantic type must be identical. If two peer nodes are 50px apart, all peer nodes at that level must be 50px apart.
Nodes should snap to an implicit grid. Consistent x/y positioning signals intentional design. Center-align or left-align text consistently within a diagram -- never mix alignment styles for the same element type.
| Elements | Action |
|---|---|
| 3-6 | Generate directly, compact canvas |
| 7-15 | Standard canvas, clear grouping |
| 16-20 | Consider splitting; ask user if unclear |
| 20+ | Must split into overview + detail diagrams |
Additional split signals:
Splitting strategy:
| Element | Size | Weight |
|---|---|---|
| Diagram title | 20-24px | Bold (700) |
| Group/boundary label | 14-16px | Semi-bold (600) |
| Node label | 12-14px | Medium/Semi-bold (500-600) |
| Edge/connector label | 10-12px | Regular (400) |
| Annotation/note | 10-11px | Regular/Italic |
| Legend text | 10-12px | Regular (400) |
Rules:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif'SF Mono', 'Cascadia Code', Consolas, 'Liberation Mono', Menlo, 'Courier New', monospace| Effect | Use When | Avoid When |
|---|---|---|
| Gradient | Subtle on primary elements for depth | Applied uniformly to everything |
| Drop shadow | Lifting 1-2 key elements above the plane | Applied to every node |
| Border/stroke | Defining boundaries, showing containment | Thick borders on everything |
| Border radius | 4-8px for modern look | Fully circular for non-circular concepts |
| Opacity | Fading background/inactive elements (0.3-0.5) | Fading important elements |
When the user describes what they want but does not specify a diagram type, select based on the primary relationship they need to communicate:
| User Intent | Best Diagram Type |
|---|---|
| "How does the system work overall?" | Architecture (layered) or C4 Context |
| "How do these services communicate?" | Sequence diagram |
| "Walk me through this process" | Flowchart |
| "Who handles each step?" | Swimlane |
| "What states can this be in?" | State machine |
| "Show the database schema" | ER diagram |
| "What depends on what?" | Dependency graph |
| "Compare these options" | Comparison (side-by-side) or table |
| "Show the project timeline" | Gantt / timeline |
| "What's the security boundary?" | Threat model / DFD |
| "Brainstorm / map this topic" | Mind map |
| "Show traffic distribution" | Sankey diagram |
| "What overlaps between these?" | Venn diagram |
| "What's the decision logic?" | Decision tree |
| "Central service with consumers" | Hub and spoke |
| "How is it deployed?" | Deployment diagram |
| "Org structure / hierarchy" | Tree / org chart |
If the content could work as multiple types, choose the one that highlights the primary relationship the reader needs to understand. When genuinely ambiguous, ask the user.
Before presenting any diagram, verify: