excalidraw-diagram

Name: excalidraw-diagram
Author: walidboulanouar

82stars17forks

How to install excalidraw-diagram?

walidboulanouar/ay-skills/excalidraw-diagram

$npx -y skills add walidboulanouar/Ay-Skills --skill excalidraw-diagram

Installs into the current project.

Summary

Create Excalidraw diagram JSON files that make visual arguments. Use when the user wants to visualize workflows, architectures, agent systems, client deliverables, or any concept as a diagram. Triggers on phrases like "draw a diagram", "make an excalidraw", "visualize this system

Files · 1

View on GitHub

SKILL.md

1	# Excalidraw Diagram Creator
2
3	Generate `.excalidraw` JSON files that argue visually, not just display information.
4
5	Setup: If the user asks you to set up this skill (renderer, dependencies, etc.), see `README.md` for instructions.
6
7	---
8
9	## AY Automate Style Defaults (always apply unless told otherwise)
10
11	### Visual style
12	```
13	roughness: 2 ← hand-drawn / sketchy (NOT clean/sharp) — boxes only
14	strokeWidth: 2 ← medium stroke weight
15	roundness: {"type":3} ← rounded corners on all rectangles
16	fontFamily: 1 ← Virgil (handwritten font) — NOT mono, NOT sans
17	```
18
19	Boxes / shapes: `strokeStyle: "dotted"` + `roughness: 2`
20
21	Arrows / lines: `strokeStyle: "solid"` + `roughness: 1` — arrows are clean, only boxes are dotted
22
23	### Text rules
24	- Titles are free text — never wrap the title in a box. Just a plain text element above the diagram.
25	- Write titles in lowercase — "ralph loop", not "RALPH LOOP". Natural handwritten feel.
26	- Use line breaks inside node labels — split label and sub-label with `\n`
27	- Keep labels short and human — "reads files" not "file ingestion module"
28	- Write like you're explaining to a non-technical person
29	- Free-floating annotations are better than boxing everything
30
31	### Color mode
32	- Dark (`viewBackgroundColor: "#14141c"`) — internal docs, LinkedIn content, agent diagrams
33	- Light (`viewBackgroundColor: "#f0edee"`) — client deliverables, onboarding, proposals
34	- Ask or infer from context. Default = dark.
35	- Colors come from `references/color-palette.md`.
36
37	### Brand
38	Periwinkle `#8182C1` is the accent. Never use generic blue `#3b82f6` or any purple `#7c3aed`.
39
40	Output path: `008_Builds/excalidraw/output/{slug}.excalidraw`
41
42	Render path: `008_Builds/excalidraw/output/{slug}.png`
43
44	Render command:
45	```bash
46	cd .claude/skills/excalidraw-diagram/references && uv run python render_excalidraw.py ../../../008_Builds/excalidraw/output/{slug}.excalidraw
47	```
48
49	Common use cases:
50	- Agent architecture maps (Claude → n8n → Supabase → client)
51	- Client onboarding flows (what we build, in what order)
52	- AI pipeline explainers (for LinkedIn content)
53	- Internal system diagrams (for engineers on client projects)
54	- Ralph loop / agentic flow diagrams
55	- Competitor / comparison maps
56	- GTM funnel visualizations
57
58	---
59
60	## Customization
61
62	All colors and brand-specific styles live in one file: `references/color-palette.md`. Read it before generating any diagram and use it as the single source of truth for all color choices — shape fills, strokes, text colors, evidence artifact backgrounds, everything.
63
64	To make this skill produce diagrams in your own brand style, edit `color-palette.md`. Everything else in this file is universal design methodology and Excalidraw best practices.
65
66	---
67
68	## Core Philosophy
69
70	Diagrams should ARGUE, not DISPLAY.
71
72	A diagram isn't formatted text. It's a visual argument that shows relationships, causality, and flow that words alone can't express. The shape should BE the meaning.
73
74	The Isomorphism Test: If you removed all text, would the structure alone communicate the concept? If not, redesign.
75
76	The Education Test: Could someone learn something concrete from this diagram, or does it just label boxes? A good diagram teaches—it shows actual formats, real event names, concrete examples.
77
78	---
79
80	## Depth Assessment (Do This First)
81
82	Before designing, determine what level of detail this diagram needs:
83
84	### Simple/Conceptual Diagrams
85	Use abstract shapes when:
86	- Explaining a mental model or philosophy
87	- The audience doesn't need technical specifics
88	- The concept IS the abstraction (e.g., "separation of concerns")
89
90	### Comprehensive/Technical Diagrams
91	Use concrete examples when:
92	- Diagramming a real system, protocol, or architecture
93	- The diagram will be used to teach or explain (e.g., YouTube video)
94	- The audience needs to understand what things actually look like
95	- You're showing how multiple technologies integrate
96
97	For technical diagrams, you MUST include evidence artifacts (see below).
98
99	---
100
101	## Research Mandate (For Technical Diagrams)
102
103	Before drawing anything technical, research the actual specifications.
104
105	If you're diagramming a protocol, API, or framework:
106	1. Look up the actual JSON/data formats
107	2. Find the real event names, method names, or API endpoints
108	3. Understand how the pieces actually connect
109	4. Use real terminology, not generic placeholders
110
111	Bad: "Protocol" → "Frontend"
112	Good: "AG-UI streams events (RUN_STARTED, STATE_DELTA, A2UI_UPDATE)" → "CopilotKit renders via createA2UIMessageRenderer()"
113
114	**Research makes di

People who liked this also viewed

6 picks

Type

excalidraw-diagram

82stars17forks

View on GitHub

How to install excalidraw-diagram?

walidboulanouar/ay-skills/excalidraw-diagram

$npx -y skills add walidboulanouar/Ay-Skills --skill excalidraw-diagram

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Excalidraw Diagram Creator
2
3	Generate `.excalidraw` JSON files that argue visually, not just display information.
4
5	Setup: If the user asks you to set up this skill (renderer, dependencies, etc.), see `README.md` for instructions.
6
7	---
8
9	## AY Automate Style Defaults (always apply unless told otherwise)
10
11	### Visual style
12	```
13	roughness: 2 ← hand-drawn / sketchy (NOT clean/sharp) — boxes only
14	strokeWidth: 2 ← medium stroke weight
15	roundness: {"type":3} ← rounded corners on all rectangles
16	fontFamily: 1 ← Virgil (handwritten font) — NOT mono, NOT sans
17	```
18
19	Boxes / shapes: `strokeStyle: "dotted"` + `roughness: 2`
20
21	Arrows / lines: `strokeStyle: "solid"` + `roughness: 1` — arrows are clean, only boxes are dotted
22
23	### Text rules
24	- Titles are free text — never wrap the title in a box. Just a plain text element above the diagram.
25	- Write titles in lowercase — "ralph loop", not "RALPH LOOP". Natural handwritten feel.
26	- Use line breaks inside node labels — split label and sub-label with `\n`
27	- Keep labels short and human — "reads files" not "file ingestion module"
28	- Write like you're explaining to a non-technical person
29	- Free-floating annotations are better than boxing everything
30
31	### Color mode
32	- Dark (`viewBackgroundColor: "#14141c"`) — internal docs, LinkedIn content, agent diagrams
33	- Light (`viewBackgroundColor: "#f0edee"`) — client deliverables, onboarding, proposals
34	- Ask or infer from context. Default = dark.
35	- Colors come from `references/color-palette.md`.
36
37	### Brand
38	Periwinkle `#8182C1` is the accent. Never use generic blue `#3b82f6` or any purple `#7c3aed`.
39
40	Output path: `008_Builds/excalidraw/output/{slug}.excalidraw`
41
42	Render path: `008_Builds/excalidraw/output/{slug}.png`
43
44	Render command:
45	```bash
46	cd .claude/skills/excalidraw-diagram/references && uv run python render_excalidraw.py ../../../008_Builds/excalidraw/output/{slug}.excalidraw
47	```
48
49	Common use cases:
50	- Agent architecture maps (Claude → n8n → Supabase → client)
51	- Client onboarding flows (what we build, in what order)
52	- AI pipeline explainers (for LinkedIn content)
53	- Internal system diagrams (for engineers on client projects)
54	- Ralph loop / agentic flow diagrams
55	- Competitor / comparison maps
56	- GTM funnel visualizations
57
58	---
59
60	## Customization
61
62	All colors and brand-specific styles live in one file: `references/color-palette.md`. Read it before generating any diagram and use it as the single source of truth for all color choices — shape fills, strokes, text colors, evidence artifact backgrounds, everything.
63
64	To make this skill produce diagrams in your own brand style, edit `color-palette.md`. Everything else in this file is universal design methodology and Excalidraw best practices.
65
66	---
67
68	## Core Philosophy
69
70	Diagrams should ARGUE, not DISPLAY.
71
72	A diagram isn't formatted text. It's a visual argument that shows relationships, causality, and flow that words alone can't express. The shape should BE the meaning.
73
74	The Isomorphism Test: If you removed all text, would the structure alone communicate the concept? If not, redesign.
75
76	The Education Test: Could someone learn something concrete from this diagram, or does it just label boxes? A good diagram teaches—it shows actual formats, real event names, concrete examples.
77
78	---
79
80	## Depth Assessment (Do This First)
81
82	Before designing, determine what level of detail this diagram needs:
83
84	### Simple/Conceptual Diagrams
85	Use abstract shapes when:
86	- Explaining a mental model or philosophy
87	- The audience doesn't need technical specifics
88	- The concept IS the abstraction (e.g., "separation of concerns")
89
90	### Comprehensive/Technical Diagrams
91	Use concrete examples when:
92	- Diagramming a real system, protocol, or architecture
93	- The diagram will be used to teach or explain (e.g., YouTube video)
94	- The audience needs to understand what things actually look like
95	- You're showing how multiple technologies integrate
96
97	For technical diagrams, you MUST include evidence artifacts (see below).
98
99	---
100
101	## Research Mandate (For Technical Diagrams)
102
103	Before drawing anything technical, research the actual specifications.
104
105	If you're diagramming a protocol, API, or framework:
106	1. Look up the actual JSON/data formats
107	2. Find the real event names, method names, or API endpoints
108	3. Understand how the pieces actually connect
109	4. Use real terminology, not generic placeholders
110
111	Bad: "Protocol" → "Frontend"
112	Good: "AG-UI streams events (RUN_STARTED, STATE_DELTA, A2UI_UPDATE)" → "CopilotKit renders via createA2UIMessageRenderer()"
113
114	**Research makes di

People who liked this also viewed

6 picks

Type