architecture-diagram

Name: architecture-diagram
Author: proyecto26

55installs1forks

How to install architecture-diagram?

proyecto26/system-design-skills/architecture-diagram

$npx -y skills add proyecto26/system-design-skills --skill architecture-diagram

Installs into the current project.

Summary

This skill should be used when a system design needs a diagram — "draw the architecture", "diagram this system", "show the components", "make an architecture/infrastructure/topology diagram", or visualizing boxes-and-arrows, data flow, regions, or failure paths for a design. It g

Files · 1

View on GitHub

SKILL.md

1	# Architecture Diagram
2
3	Turn a stabilized design — a list of components and the connections between them —
4	into a polished, self-contained HTML + SVG diagram. Components are boxes,
5	arrows are communication/data flow, dashed boundaries are regions or trust zones.
6	This is the diagramming engine for the whole plugin; the orchestrator and building
7	blocks hand off here when it's time to draw.
8
9	> Self-contained by design: one HTML file with inline SVG and CSS, a system
10	> monospace font (no web-font fetch), and no dependency to render — it draws
11	> fully offline. The only external calls are two pinned, SRI-protected CDN
12	> scripts that power the optional PNG/PDF export; remove them and the diagram
13	> still renders — only the export buttons are lost.
14
15	## When to reach for this
16	At step 3 (high-level design) and step 6 (deep-dive) of the reasoning loop, and
17	any time a design is clear enough to draw: the component list and their
18	connections are known. Also for failure-path diagrams (step 5) — showing a
19	degradation flow is part of the design.
20
21	## When NOT to
22	Before the design has stabilized — don't draw boxes that aren't yet justified
23	(that's failure mode #7). A quick ASCII sketch in the conversation is fine for
24	early thinking; render with this skill once the components have earned their place.
25
26	## How to build a diagram
27
28	1. Gather the spec from the design: the list of components (each with a type),
29	the directed connections (with protocol/label), and any region/boundary
30	groupings. The `system-design` design-doc already produces this.
31	2. Copy the template `assets/template.html` to a working file. It carries the
32	dark theme, grid background, fonts, the export toolbar, and the summary-card
33	layout — keep those intact.
34	3. Map each component to a semantic type (color) using the table below.
35	4. Place boxes and draw arrows following the layout/spacing rules in
36	`references/design-system.md` (draw arrows before boxes so they sit behind;
37	mask arrows behind semi-transparent fills; keep ≥40px vertical gaps; legends
38	go outside boundary boxes).
39	5. Label the flow — number arrows to show request order; use dashed arrows for
40	async/replication/fallback; dashed boundaries for regions and security groups.
41	6. Fill the summary cards with the key decisions/trade-offs (ties to the
42	design doc), update the title/footer.
43	7. Open it: `open <file>.html` to view; the toolbar exports PNG/PDF.
44
45	## Semantic colors (map components to types)
46
47	These align with how the building blocks think about a system.
48
49	\| Component type \| Fill (rgba) \| Stroke \| Used for \|
50	\|---\|---\|---\|---\|
51	\| Frontend / client \| `rgba(8,51,68,0.4)` \| `#22d3ee` \| web/mobile clients, edge \|
52	\| Backend / service \| `rgba(6,78,59,0.4)` \| `#34d399` \| app/API services, workers \|
53	\| Database / store \| `rgba(76,29,149,0.4)` \| `#a78bfa` \| SQL/NoSQL, object store \|
54	\| Cache \| `rgba(8,51,68,0.4)` \| `#38bdf8` \| Redis/Memcached, CDN cache \|
55	\| Message bus / queue \| `rgba(251,146,60,0.3)` \| `#fb923c` \| Kafka, SQS, queues, streams \|
56	\| Cloud / managed \| `rgba(120,53,15,0.3)` \| `#fbbf24` \| managed services, regions \|
57	\| Security / auth \| `rgba(136,19,55,0.4)` \| `#fb7185` \| gateways, auth, firewalls \|
58	\| External / generic \| `rgba(30,41,59,0.5)` \| `#94a3b8` \| third parties, DNS \|
59
60	Full styling, arrow markers, masking, spacing, and legend rules are in
61	`references/design-system.md`.
62
63	## Output rules
64	- One self-contained `.html` file: inline CSS, inline SVG, no external images.
65	- Keep the two pinned CDN scripts (html2canvas + jsPDF) with their SRI hashes —
66	they power Copy/PNG/PDF export and nothing else. The diagram renders fully
67	without them; they're only needed for export.
68	- Avoid SVG `<foreignObject>` (renders inconsistently in html2canvas) — use plain
69	`<rect>`/`<text>`.
70	- Keep it to ~8–15 components for a high-level view; zoom into one subsystem for a
71	deep-dive rather than cramming everything into one picture.
72
73	## Dos and don'ts
74
75	Do:
76	- Draw only after the design stabilizes; render the component list and connections the design doc already produced.
77	- Map every box to a semantic type from the color table so the diagram reads at a glance.
78	- Draw arrows before boxes (so they sit behind), number them for request order, and reserve dashed arrows for async/replication/fallback.
79	- Keep it to ~8–15 components; zoom into one subsystem for a deep-dive instead of one crowded picture.
80	- Keep the file self-contain

People who liked this also viewed

6 picks

Type

architecture-diagram

55installs1forks

View on GitHub

How to install architecture-diagram?

proyecto26/system-design-skills/architecture-diagram

$npx -y skills add proyecto26/system-design-skills --skill architecture-diagram

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Architecture Diagram
2
3	Turn a stabilized design — a list of components and the connections between them —
4	into a polished, self-contained HTML + SVG diagram. Components are boxes,
5	arrows are communication/data flow, dashed boundaries are regions or trust zones.
6	This is the diagramming engine for the whole plugin; the orchestrator and building
7	blocks hand off here when it's time to draw.
8
9	> Self-contained by design: one HTML file with inline SVG and CSS, a system
10	> monospace font (no web-font fetch), and no dependency to render — it draws
11	> fully offline. The only external calls are two pinned, SRI-protected CDN
12	> scripts that power the optional PNG/PDF export; remove them and the diagram
13	> still renders — only the export buttons are lost.
14
15	## When to reach for this
16	At step 3 (high-level design) and step 6 (deep-dive) of the reasoning loop, and
17	any time a design is clear enough to draw: the component list and their
18	connections are known. Also for failure-path diagrams (step 5) — showing a
19	degradation flow is part of the design.
20
21	## When NOT to
22	Before the design has stabilized — don't draw boxes that aren't yet justified
23	(that's failure mode #7). A quick ASCII sketch in the conversation is fine for
24	early thinking; render with this skill once the components have earned their place.
25
26	## How to build a diagram
27
28	1. Gather the spec from the design: the list of components (each with a type),
29	the directed connections (with protocol/label), and any region/boundary
30	groupings. The `system-design` design-doc already produces this.
31	2. Copy the template `assets/template.html` to a working file. It carries the
32	dark theme, grid background, fonts, the export toolbar, and the summary-card
33	layout — keep those intact.
34	3. Map each component to a semantic type (color) using the table below.
35	4. Place boxes and draw arrows following the layout/spacing rules in
36	`references/design-system.md` (draw arrows before boxes so they sit behind;
37	mask arrows behind semi-transparent fills; keep ≥40px vertical gaps; legends
38	go outside boundary boxes).
39	5. Label the flow — number arrows to show request order; use dashed arrows for
40	async/replication/fallback; dashed boundaries for regions and security groups.
41	6. Fill the summary cards with the key decisions/trade-offs (ties to the
42	design doc), update the title/footer.
43	7. Open it: `open <file>.html` to view; the toolbar exports PNG/PDF.
44
45	## Semantic colors (map components to types)
46
47	These align with how the building blocks think about a system.
48
49	\| Component type \| Fill (rgba) \| Stroke \| Used for \|
50	\|---\|---\|---\|---\|
51	\| Frontend / client \| `rgba(8,51,68,0.4)` \| `#22d3ee` \| web/mobile clients, edge \|
52	\| Backend / service \| `rgba(6,78,59,0.4)` \| `#34d399` \| app/API services, workers \|
53	\| Database / store \| `rgba(76,29,149,0.4)` \| `#a78bfa` \| SQL/NoSQL, object store \|
54	\| Cache \| `rgba(8,51,68,0.4)` \| `#38bdf8` \| Redis/Memcached, CDN cache \|
55	\| Message bus / queue \| `rgba(251,146,60,0.3)` \| `#fb923c` \| Kafka, SQS, queues, streams \|
56	\| Cloud / managed \| `rgba(120,53,15,0.3)` \| `#fbbf24` \| managed services, regions \|
57	\| Security / auth \| `rgba(136,19,55,0.4)` \| `#fb7185` \| gateways, auth, firewalls \|
58	\| External / generic \| `rgba(30,41,59,0.5)` \| `#94a3b8` \| third parties, DNS \|
59
60	Full styling, arrow markers, masking, spacing, and legend rules are in
61	`references/design-system.md`.
62
63	## Output rules
64	- One self-contained `.html` file: inline CSS, inline SVG, no external images.
65	- Keep the two pinned CDN scripts (html2canvas + jsPDF) with their SRI hashes —
66	they power Copy/PNG/PDF export and nothing else. The diagram renders fully
67	without them; they're only needed for export.
68	- Avoid SVG `<foreignObject>` (renders inconsistently in html2canvas) — use plain
69	`<rect>`/`<text>`.
70	- Keep it to ~8–15 components for a high-level view; zoom into one subsystem for a
71	deep-dive rather than cramming everything into one picture.
72
73	## Dos and don'ts
74
75	Do:
76	- Draw only after the design stabilizes; render the component list and connections the design doc already produced.
77	- Map every box to a semantic type from the color table so the diagram reads at a glance.
78	- Draw arrows before boxes (so they sit behind), number them for request order, and reserve dashed arrows for async/replication/fallback.
79	- Keep it to ~8–15 components; zoom into one subsystem for a deep-dive instead of one crowded picture.
80	- Keep the file self-contain

People who liked this also viewed

6 picks

Type