Help us improve
Share bugs, ideas, or general feedback.
From the-blueprint
Technical diagram creation with visual design principles: format selection, layout, readability, and aesthetics. Invoke whenever task involves any interaction with diagrams — creating, reviewing, or improving visual representations of systems, processes, data flows, or relationships using Excalidraw or Mermaid.
npx claudepluginhub xobotyi/cc-foundry --plugin the-blueprintHow this skill is triggered — by the user, by Claude, or both
Slash command
/the-blueprint:diagrammingThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Understandable first, beautiful second. Every diagram exists to communicate — if it fails to communicate, aesthetics are
Generates Excalidraw diagram JSON files that argue visually, not just display information. Use for workflows, architectures, or concepts.
Generates Excalidraw diagram JSON files (.excalidraw) that argue visually for workflows, architectures, or concepts. Ideal for teaching relationships, flows, and technical integrations with evidence artifacts.
Generates Excalidraw JSON diagram files (.excalidraw) for visualizing workflows, architectures, and concepts as visual arguments with evidence artifacts for technical diagrams.
Share bugs, ideas, or general feedback.
Understandable first, beautiful second. Every diagram exists to communicate — if it fails to communicate, aesthetics are irrelevant. When both are achievable, pursue both.
${CLAUDE_SKILL_DIR}/references/design-principles.md] Gestalt principles, grid
system, spacing rules, color palette, typography, complexity budgets, anti-patterns, Tufte's data-ink principle${CLAUDE_SKILL_DIR}/references/excalidraw.md] JSON schema, element types, styling
properties, arrow binding, layout templates (linear, grid, radial, tiered, decision tree), diagram type conventions${CLAUDE_SKILL_DIR}/references/mermaid.md] Flowchart, sequence, class, state, ER diagram
syntax, theming, per-node styling, subgraphsChoose the format that matches the delivery context:
Use Mermaid when:
Use Excalidraw when:
These rules apply to every diagram regardless of format. They are non-negotiable.
LLMs cannot reliably reason about spatial coordinates from scratch. Compensate with these strategies:
For Excalidraw:
For Mermaid:
LR for processes, TD for hierarchies. Match direction to the conceptual flow.end as a node ID — it terminates blocks. See Mermaid reference for the full pitfall list.([text]) in Mermaid)When generating Excalidraw JSON, use these defaults unless the context demands otherwise:
roughness: 0 — clean lines for professional outputfillStyle: "solid" — solid fills, not hachurestrokeWidth: 2 — normal weightfontFamily: 5 — Excalifont (current Excalidraw default)fontSize: 20 — box labels; 28 for titles; 16 for descriptionsroundness: { "type": 3 } — rounded rectangle corners#ffffffAfter generating a diagram:
user-auth-flow.excalidraw or include Mermaid inline in the documentRequest: "Create a diagram showing the user authentication flow"
Format decision: This is a process flow for a design doc → Mermaid (markdown-embedded, auto-layout sufficient).
Output:
%%{init: {'theme': 'neutral'}}%%
flowchart TD
A([Start]) --> B[Enter Credentials]
B --> C{Valid?}
C -->|Yes| D[Generate JWT]
C -->|No| E[Show Error]
E --> B
D --> F[Redirect to Dashboard]
F --> G([End])
Created: authentication flow diagram (7 nodes, 7 edges). Embedded inline in the design document.
Request: "Create an architecture diagram of our API gateway setup"
Format decision: Architecture diagram needing spatial grouping and color-coded tiers → Excalidraw.
Agent approach:
.excalidraw JSON with bound arrows and labelsapi-gateway-architecture.excalidrawDiagrams are a design-phase artifact. They compose naturally with the blueprint pipeline:
design-documents — create diagrams to illustrate the problem space, compare solution options visuallytechnical-design — create architecture diagrams showing component relationships, data flow, deployment
topologyBefore delivering any diagram, verify: