Help us improve
Share bugs, ideas, or general feedback.
From ideate
Generate Excalidraw diagrams from natural language descriptions. Produces .excalidraw JSON files that open natively in PhpStorm, VS Code, and excalidraw.com. Layout argues through visual structure -- the arrangement communicates meaning, not just labels. Use when you need to produce a spatial/structural diagram: system architecture, component relationships, data flow, sequence of actor interactions, dependency graphs, decision trees, or workflow pipelines. Triggered by "diagram this", "draw a diagram", "create a flowchart", "draw the flow", "show the architecture", "show how X connects to Y", "map the dependencies", or "now diagram that" (when chaining from brainstorm or research). Can chain after ideate:brainstorm or ideate:research. NOT for: bar/line/pie charts or data visualizations, written explanations, textual lists or outlines, or any output where spatial arrangement adds no meaning.
npx claudepluginhub cosmicdreams/claude-plugins --plugin ideateHow this skill is triggered — by the user, by Claude, or both
Slash command
/ideate:diagramThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate `.excalidraw` JSON files from natural language descriptions. Diagrams
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Explores codebases via GitNexus: discover repos, query execution flows, trace processes, inspect symbol callers/callees, and review architecture.
Share bugs, ideas, or general feedback.
Generate .excalidraw JSON files from natural language descriptions. Diagrams
argue through visual structure — the layout and arrangement communicate meaning,
not just the labels.
Output files open natively in PhpStorm (Excalidraw plugin), VS Code (Excalidraw extension), and excalidraw.com.
references/json-reference.md — element type table, JSON property templates for rectangles/text/arrows, color palette; read before generating any JSONassets/excalidraw-render.py — renders an .excalidraw file to HTML for screenshotting; use in Phase 5Check for context from a prior ideate session to use as diagram subject:
# Check for research session
test -f .research.json && python3 -c "
import json
with open('.research.json') as f:
d = json.load(f)
if d.get('status') == 'synthesized':
print('research')
print(d.get('topic', ''))
print(d.get('summary', '')[:500])
"
# Check for brainstorm session
ls .brainstorm-sessions/*.json 2>/dev/null | sort -r | head -1
Extract:
topic: The diagram subject (5-10 words, used for filename)description: What to diagram (from user input or session context)If the user's request is ambiguous (no explicit subject, scope, or level of detail): ask one clarifying question before proceeding — e.g., "High-level overview or detailed breakdown? What's the main thing you want someone to understand from this diagram?" Do not ask multiple questions; pick the one that unblocks design.
Determine diagram type before generating any JSON:
Conceptual diagram — abstract shapes for mental models, workflows, relationships. Use when: explaining how something works, showing a process flow, mapping a system.
Technical diagram — concrete examples, real code snippets, actual API/data formats. Use when: documenting an architecture, showing data flow with real payloads, teaching a specific implementation pattern.
For technical diagrams: look up actual specifications before generating. Generic placeholders are not acceptable.
The isomorphism test (apply before generating JSON): Mentally remove all text from the planned diagram. Does the structure alone communicate the concept? If not, redesign the layout until it does.
Visual pattern selection — pick the pattern that matches the concept:
| Concept type | Visual pattern |
|---|---|
| Hierarchy / tree | Top-down fan-out |
| Pipeline / sequence | Left-to-right flow |
| Convergence | Multiple inputs → single output |
| Feedback loop | Circular or spiral |
| Comparison | Side-by-side columns |
| System boundary | Nested containers |
| Decision tree | Diamond branching |
Layout principles:
Read references/json-reference.md before generating any JSON — it contains the
file header, all element type templates, and the semantic color palette.
Key rules from that reference:
roughness: 0, opacity: 100fontFamily: 3 (monospace) for text elementsGenerate the filename:
DATE=$(date +%Y-%m-%d)
SLUG=$(echo "TOPIC" | tr '[:upper:]' '[:lower:]' | tr ' ' '-' | tr -cd 'a-z0-9-' | cut -c1-40)
FILENAME="${DATE}-${SLUG}.excalidraw"
echo $FILENAME
Write the complete JSON, then validate:
python3 -c "import json; json.load(open('$FILENAME')); print('Valid JSON ✓')"
This phase is mandatory. You cannot judge a diagram from JSON alone.
Use assets/excalidraw-render.py to generate the HTML wrapper, then screenshot it:
RENDER_HTML=$(mktemp /tmp/excalidraw-render-XXXXX.html)
python3 "${CLAUDE_SKILL_DIR}/assets/excalidraw-render.py" "$FILENAME" "$RENDER_HTML"
PREVIEW="${FILENAME%.excalidraw}-preview.png"
playwright-cli screenshot "file://$RENDER_HTML" "$PREVIEW" --wait-for-timeout 4000
rm -f "$RENDER_HTML"
Then use the Read tool on $PREVIEW to view the rendered result.
If
playwright-cliis not installed:npm i -g playwright-clior open the.excalidrawfile directly in PhpStorm / drag to excalidraw.com to inspect.
Run until the diagram passes all checks:
x/y, add waypoints to arrow
points arrays, resize for visual balanceStop when: no text is clipped, arrows connect correctly, spacing is balanced, and you'd show this to someone without caveats. Usually 2–3 iterations.
After delivering the file, offer:
"Diagram written to
FILENAME. Open it in PhpStorm or drag it to excalidraw.com to view and edit. Want to iterate on the layout, or generate a different view of the same topic?"
If chained from ideate:brainstorm, also offer:
"This idea cleared brainstorm and now has a diagram. Ready to run
ideate:reality-checkon it?"
The diagram is already written locally (Phase 4). This phase archives it to the Obsidian vault if one is present.
Choose the vault subfolder based on diagram type:
Architecture/<topic>/ — system/component/data-flow diagramsArchitecture/ADRs/<topic>/ — decision trees, option comparisonsResearch/<topic>/ — dependency maps, audit diagramsVAULT_ROOT="$HOME/Vaults/${OBSIDIAN_VAULT_NAME:-Neurons}"
SUBFOLDER="Architecture/<topic>" # adjust per type above
if [ -d "$VAULT_ROOT" ]; then
mkdir -p "$VAULT_ROOT/$SUBFOLDER"
cp "$FILENAME" "$VAULT_ROOT/$SUBFOLDER/$FILENAME"
echo "Saved to vault: $SUBFOLDER/$FILENAME"
else
echo "Saved locally: $FILENAME"
echo "Tip: to route diagrams to your Obsidian vault automatically, run /update-config and set OBSIDIAN_VAULT_NAME."
fi