Node
6px radius, hairline, flat fill. The subject of the diagram gets the accent bar — everything else is peer-identical.
Connector
1.5px, orthogonal, one arrowhead. No curves. Dashed means optional or not yet — nothing else.
Colour
Peers are told apart by their names, never by hue. Orange marks the one thing the diagram is about. Status colours only in diagrams about status.
Solid means there, dashed outline means not there. One vocabulary across the whole set: a filled shape is what you get, a dashed outline of the same shape is what is missing or not yet reachable — the shortfall has a size, not a sentence. Warn colour on the outline where it is a degradation rather than a precondition.
A picture, not a text block in boxes. If the drawing would still work as a bulleted list, it is not a diagram — meaning has to sit in position, length or alignment. Boxes and arrows are the last resort, not the starting vocabulary.
One claim per diagram. The title states it, the closing line states its consequence. If two claims are needed, that is two diagrams.
One file, both modes. Colour is written as attributes, each of them var(--token, #light): referenced into a page the drawing takes its tokens, and opened on its own it falls back to the light hex. A <style> block would be stripped by GitHub, and an <img> would never see a token at all.
Type. Source Sans 3, with every identifier in Source Code Pro. Floor is 13px at the drawn size — a diagram that needs smaller type is carrying too much.
No shadows, no gradients, no outer radius. Depth is a hairline. The canvas is a flat rectangle at --surface-canvas with a 60px margin.