I’d like to bring this up again. Now that we have improved support for SVG diagrams (as in, privileged users can attach them without jumping through hoops), I’d love to see us start to do more to use visuals to improve understanding of concepts.
To that end, we need to have a proper design standard for diagrams. This would need to include things like:
- Color palette: standard line and border color, standard colors for “extra lines” (to help multiple paths differentiate), default box background color, colors for “good” and “bad” boxes, colors for “categorized” boxes (like “these boxes are in object X and those are object Y”, etc. A good selection of colors to choose from for those, with preference order.
- Line standards: standard form for “dotted” and “dashed” lines, standard line thickness, arrowhead styles, etc. What to do when lines cross. How to indicate “yes” and “no” (or A/B/C) decisions
- Box standards: Squared vs rounded. Shapes for state and flow diagrams. Boxes with sub-boxes. Shadows?
- Text standards: Standard font(s), sizes, and weights. Box and line labels. How to style text in boxes with a heading as well as body text.
- Nesting diagrams: Sometimes we have diagrams where one kind of diagram is nested inside another, like a block diagram that has an inheritance diagram inside it, or that kind of thing. Rules for how much padding and whatnot to use would be good to have.
Then we need to create some templates for how different types of standard diagram should look, including:
- Inheritance diagrams
- Flow diagrams
- Block diagrams
- State diagrams
- Relational diagrams (showing relationships between a number of objects or concepts)
In addition, we should have standards for how to display captioned diagrams, images, and tables. IMO, all images, tables, and other figures should be captioned, which currently they rarely are, since we have no styling for the
<figcaption> elements. We should come up with an appearance and then add CSS for this so we can start properly presenting our figures.