DITAA Color Codes For Diagrams: Using Color To Help Separate Items In DITAA Diagrams

Use Color To Help Separate Items In DITAA Diagrams

IoT (Internet of Things) system architecture system architecture drawing

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.

Conclusion

Use color to help separate items in DITAA diagrams. Use these and other diagrams to document your system architecture.

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. Contact Dojo Five.