Use Color To Help Separate Items In DITAA Diagrams
This is an example context diagram of a typical IoT (Internet of Things) system architecture, created with DITAA (DIagrams Through Ascii Art), one of the types of diagrams supported by AsciiDoctor and the VS Code AsciiDoc extension.
Creating diagrams like this follows D5’s Modern Embedded tenet of Emergent, Intentional Architecture:
Architecture matching the inherent problem to be solved, evolved and documented as the project evolves.
Color and gray-scale help separate and organize visual elements. This diagram is deliberately overly colorful to demonstrate the range of choices that DITAA offers.
For more on AsciiDoctor, see Documenting System Architecture With AsciiDoctor.
DITAA Color Codes
DITAA is a simple text format that allows the creation of free-form custom diagrams. The context diagram was generated from the following text using the AsciiDoc extension (note that the syntax for diagram inclusion is extension-dependent; other extensions may use “@startditaa” and “@endditaa” instead of “[ditaa]” and “….”):
The colors are specified by their RGB (Red, Green, Blue) component value in the “cRGB” terms in the text, with each color component ranging from 0 to F (hexadecimal 15).
Any closed figure in the diagram can have a color code. The requirement to close the figures means lines and arrows in the diagram can’t cross the figure edges, which is why they are broken into multiple segments here.
DITAA supports a small set of named colors directly, but that’s very limited. Using RGB codes allows the full range of tones and shades. There are 4096 in all.
DITAA Color Code Chart
Identifying the desired color to use in a diagram can be difficult, turning into a trial-and-error hunt for a code that looks good.
Below is a downloadable DITAA color code chart you can use as a reference resource for color selection. It was generated using DITAA. The DITAA text isn’t included here, because it’s very long (it contains a total of 4096 graphic elements!), but it’s similar to the DITAA text above. Tip: Download this chart and once you find a color you like, zoom in to see the color code.
VIRIDIS Color Palette
Alternatively, when choosing colors, it may be important to consider not just what looks nice, but also what is most accessible to a larger audience of people. A common palette that is chosen is the VIRIDIS palette which is based off of a mathematical formula designed to help guarantee the colors look distinct for people with color blindness, or even when converted to black and white. If you want to skip the math behind generating your own viridis palette, there are several generators that can be found online like this one which let you get a list of colors and their hex codes.
Conclusion
Use color to help separate items in DITAA diagrams. Use these and other diagrams to document your system architecture.
Next Steps
Dojo Five can help you with architecture documentation. We bring modern tools, techniques, and best practices from web and mobile development environments, and pair them with leading-edge innovations in firmware. We help our customers build successful products and successful clients. Bring your interesting problems that need solving-we are always happy to help out. Book a Call with Dojo Five.
