Initial release: diagram-design v1.0
Thirteen editorial diagram types (architecture, flowchart, sequence, state, ER, timeline, swimlane, quadrant, nested, tree, layers, venn, pyramid) as self-contained HTML files with inline SVG. Progressive disclosure: lean SKILL.md points to per-type references. Neutral stone+rust default skin, first-run gate that prompts users to customize the style guide from their own website, URL-based onboarding, annotation-callout primitive, sketchy filter variant, live gallery at assets/index.html.
This commit is contained in:
@@ -0,0 +1,20 @@
|
||||
# Architecture
|
||||
|
||||
**Best for:** system overviews, data-flow diagrams, integration maps, infra topology.
|
||||
|
||||
## Layout conventions
|
||||
- Group components by tier or trust boundary (frontend → backend → data; public → private).
|
||||
- Primary flow runs left→right or top→down. Pick one and hold it.
|
||||
- Draw arrows before boxes so z-order puts connections behind components.
|
||||
- 1–2 coral focal nodes: the primary integration point, the primary data store, or the key decision node.
|
||||
- Dashed boundary rectangles mark regions (VPC, security group, trust zone); labels sit on a paper-colored mask over the boundary line.
|
||||
|
||||
## Anti-patterns
|
||||
- Every box in coral ("this is important too") — hierarchy collapses.
|
||||
- Bidirectional arrow when one direction is obvious from context.
|
||||
- Legend floating inside the diagram area.
|
||||
|
||||
## Examples
|
||||
- `assets/example-architecture.html` — minimal light
|
||||
- `assets/example-architecture-dark.html` — minimal dark
|
||||
- `assets/example-architecture-full.html` — full editorial
|
||||
Reference in New Issue
Block a user