11 βDiagram element
A diagram provides a fairly basic means of showing relationships.
The
Note that Smallsite Design does not allow SVG images to be uploaded because they can contain malicious code or links with no reliable way of vetting them, and simply removing possible sources of such in them when uploading will likely break their functionality.
The elements have some options to provide variety, such as background colours or line styles, but not so there is a steep learning curve to being able to use them. Positioning and sizing is in pixels. Unlike other complex elements, the colours of its elements are independent of the subsite's theme.
box - π° β basic rectangle with text and a selectable background colour. Can be a link.
text - A β text area for labelling. Can be a link. Text size is smaller than for boxes. Shows a pink background tinge while editing, but not when viewed.
line β³- β β right angle line of selectable type. Set a dimension to 0 to have a straight line. Border can be solid, dashed or dotted.
marker - β β symbols for marking lines: arrowhead for each direction, diamond, square, circle and junction. Their size is 6x6 pixels.
anchor - β β an invisible (when not editing) element to put in diagonally-opposite corners to force sizing of the canvas. Their size is 10x10 pixels.
suboverlay β³- β§ β element with optional image background (transparent if none) and/or border with colour and style. For overlaying its parent
overlay . Can contain other diagram items but notoverlays or othersuboverlays . Shows a pink background tinge while editing, but not when viewed. Elements within this will take visual precedence over those in its parentoverlay . overlay - β β as for
suboverlays but for overlaying thediagram 's background. Can contain other diagram items except another overlay. Shows a pink background tinge while editing, but not when viewed. Elements within this will take visual precedence over those in thediagram itself. background - Universal border-to-border background image for the
diagram , if selected, otherwise a neutral grey. Any image is repeated in each direction.
Visual stacking priorityβ³
The visual stacking priority dictates which elements appear over others.
- a.
Boxes are always on top. - b.
Text can coverlines for labelling them. - c.
Markers can be placed anywhere, including in multiple places alonglines . - d.
Lines are underneath, so that their sizing does not have to be exact when placing them to appear joined toboxes ormarkers . - e.Later elements of the same type cover earlier ones if they overlap.
- f.Siblings of an overlay will be hidden by it, unless it is transparent, though if it has a border, that will be shown over those sibling elements.
- g.Elements in an overlay take precedence over those in any of its ancestors.
- h.These apply within one of a
diagram ,overlay orsuboverlay , but might not between sibling overlays.
Stacking contextβ³
The stacking order works within the elements of a diagram, overlay or suboverlay, but not necessarily between them.
Which page elements are drawn over others is defined in CSS by each element's
The rendering order is by the top offset of each element, followed by the start offset, making the flow start to end, then top to bottom, with later elements in the flow taking priority over those earlier. Note that the coordinates are for an element's origin, with its body away and below, except for lines, which can have part of themselves before or above their origin, or have one dimension zero.
A related situation is that the
Dimensions and sizingβ³
Elements can be moved, and except for markers and anchors, can be sized.
- a.The rendering direction defaults to the reading direction for the locale, but setting the
diagram 'sDirection will set the starting side to be independent of the viewing locale. - b.Sizes and axes offsets start at 0 from the upper starting-side of the
diagram . However, after any move or sizing, the top of the uppermost element is set to 0, and the start of the start-most element is set to 0, leading to all sibling element offsets being recalculated. - c.While
box andtext sizes are always positive, setting anyline dimension negative will flip it around that dimension. This allowslines to be any orthogonal orientation of a right angle. - d.While a
line is two dimensional, setting one of the dimensions to 0 makes it a straight line in the other dimension. - e.Dimensions always include any border or
line widths, which are always two pixels, but the offsets for child elements are from within the border. These need to be accounted for if deciding to turn on or off the border for anoverlay orsuboverlay , as their content position will change in relation to that outside them. - f.
Markers are 6 by 6 pixels andanchors are 10 by 10 pixels, with their origins also at the upper start of that sizing rectangle, which will help with pixel-accurate placement.
When created, all elements appear in the upper start-side corner. Preferably use the
When background images are specified for
If an element is moved to another element using the To facility or Spikes, its coordinates are retained to retain relative positions with other elements that may be being moved as well. Preferably use overlays and suboverlays to enable moving multiple elements at once as they make it easier to reposition them at their new location in their current spatial relationships.
When moving a bunch of elements from a
However, deleting an element will trigger a recalculation of all offsets if it was the top-most or start-most element. To avoid unnecessary recalculations while editing, perhaps use an
A
Background images and overlaysβ³
Diagrams, overlays and suboverlays can have a background image for their child elements to annotate, though overlays and suboverlays are transparent if they do not have one.
A
Because there are no locale-specific dimensions for diagram sub-elements, the best uses for background images and overlays are for real-world objects which are not locale-dependent. This means screenshots for documenting computer programs may not work if using multiple locales because particular areas of the screen layouts will likely vary between locales, especially if scripts of different reading directions are used. Better to use a figure with images with multiple pre-annotated locale variants for that scenario, or use
Background images will not be announced by accessibility software, so if used, describe them in the introduction so that when the text is read out, the listener has some idea of the context. For example, The areas of Australia receiving the most rainfall are:
directly implies that there is an image of Australia as a background with rainfall indicators over it. Those indicators could be text elements with placenames and rainfall, which will be read out, so providing all the context required to appreciate the diagram, even if it cannot be seen.
The images are repeated in both directions, so can be used for decorative embellishment, but be aware that that may make them more likely to be a distraction.
That means that some drawing elements must be in diagonally-opposite corners to ensure that the wanted parts of the image are displayed. Use
During editing,
Sizing linesβ³
Lines can be sized in two dimensions like boxes and texts, but that their dimensions can be negative perhaps needs some explanation.
When decreasing a dimension of a
Because
Limitationsβ³
Diagrams will obviously not help those with severe visual impairments, but for many others, such visual paradigms also do not work.
We live in a world principally geared towards people with working eyesight, even if we need glasses. But just because we can see does not mean we will comprehend what any diagram using this element is meant to show. Just like words, diagrams are an arrangement of patterns, and just like some have difficulty visually understanding word patterns, many have difficulty understanding what the shapes mean, either in themselves or their spatial relationships.
Keeping diagrams simple enough to have their content easily understood means that they usually cannot carry the full narrative of the article, without including more content in them that would only confuse visually. Stick to using diagrams to illustrate simple concepts, relationships or workflows. Make sure their introduction accurately indicates what they are about, so the viewer will look for that information in the body of the article. It may be better to split content into separate diagrams to keep them simple.
This means that
- a.
Diagram: 99 items, counting each overlay as one. - b.
Overlay: 50 items, counting each suboverlay as one. - c.
Suboverlay: 25 items. - d.
Element: maximum 1000px width or height. - e.
Line: maximum 300px negative width or height. - f.
Diagram: maximum 2000px width, 3000px height. - g.
Overlay|suboverlay: child origin is within its size.
These item limits are not expected to ever be exceeded. The limits for diagrams and overlays are for where an element can be positioned. With a width of up to 1000px, an element placed in the furthest corner will increase the
Unless items are well spaced out, navigate using the element block hierarchy, or the keyboard as it allows tabbing forward or backwards from visible hover buttons to those for a buried element, which can then be selected by pressing
The tabbing order of elements is visual, proceeding from start-to-end then top-to-bottom, and they are shown in that order in element block lists. The content elements of an