html-diagram

1# HTML Diagram
2 
3Build the smallest visual model that makes the relationship easier to understand than prose alone. Match the notation and visual language to the user's project and subject. Do not force every topic into the same SVG boxes and arrows.
4 
5## Choose the right model
6 
7Identify the question the reader should answer, then select the form:
8 
9- topology for components and connections;
10- sequence for ordered messages over time;
11- process for steps, branches, and handoffs;
12- state for transitions and conditions;
13- hierarchy for containment or ownership;
14- timeline for change over time;
15- matrix for repeated relationships;
16- quantitative view when magnitude matters.
17 
18Decide what must remain visible together and what can be revealed on demand. Use a simpler form when it carries the same meaning.
19 
20## Choose the rendering method
21 
22Use HTML and CSS, SVG, Canvas, or WebGL according to the information and scale. Do not use SVG merely because the output is a diagram.
23 
24- Keep labels, grouping, direction, and connectors legible before adding interaction.
25- Use stable node positions when readers must compare states or steps.
26- Keep edge crossings and ambiguous arrowheads to a minimum.
27- Put intentionally broad canvases in a contained pan or scroll region.
28- Use legends only when notation is not self-explanatory.
29…