This skill should be used when the user asks to "create a diagram", "draw a flowchart", "visualize the architecture", "show me how X works", "add a diagram to the docs", "create an ASCII diagram", "make a Mermaid chart", or needs visual representation of systems, workflows, data flows, or comparisons. Supports both ASCII (for AI-maintained docs, terminals, code comments) and Mermaid (for rendered markdown).
Generates ASCII and Mermaid diagrams for architecture, workflows, and data flows.
/plugin marketplace add jasonkuhrt/claude-marketplace/plugin install diagrams@jasonkuhrtThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/ascii-patterns.mdreferences/mermaid-syntax.mdArchitecture docs, workflows, data flows, comparisons, file trees, sequence diagrams, state machines.
| Format | Best For | Renders In |
|---|---|---|
| ASCII | AI-maintained docs, terminals, code comments, git diffs | Everywhere |
| Mermaid | Complex auto-layout, dependency trees, sequence diagrams | Markdown renderers |
| Tables | Comparisons, feature matrices | Markdown |
Key tradeoffs:
@mermaid-js/parser), but requires rendererReference references/ascii-patterns.md for: box diagrams, flows, file trees, decision branches, sequence diagrams, layered architecture.
Reference references/mermaid-syntax.md for: flowcharts, sequence diagrams, state diagrams, class diagrams, Gantt charts.
All lines in a boxed diagram must end at the same column. Ragged right edges look broken.
Technique:
WRONG (ragged right edges):
┌───────────────────────────┐
│ Frontend │
│ ┌──────┐ ┌───────┐ │
│ │ React│ │ Redux │ │
│ └──────┘ └───────┘│
└───────────────────────────┘
↑ inner boxes don't reach right edge
RIGHT (all lines end at same column):
┌──────────────────────────────┐
│ Frontend │
│ ┌──────────┐ ┌──────────┐ │
│ │ React │ │ Redux │ │
│ └──────────┘ └──────────┘ │
└──────────────────────────────┘
Synthesized from:
This skill should be used when the user asks about libraries, frameworks, API references, or needs code examples. Activates for setup questions, code generation involving libraries, or mentions of specific frameworks like React, Vue, Next.js, Prisma, Supabase, etc.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.