Design System

The Draw.io design system gives the skill a stable visual vocabulary across engineering, academic, and presentation diagrams.

Core Concepts

Profile	Purpose
`default`	Standard diagrams
`academic-paper`	IEEE, thesis, journal, and paper-ready figures
`engineering-review`	Dense architecture or network diagrams with stricter routing review

Theme	Best for
`tech-blue`	Software architecture, DevOps, general technical diagrams
`academic`	Grayscale-safe papers and IEEE figures
`academic-color`	Color paper figures and research presentations
`nature`	Lifecycle, biology, environment, sustainability
`dark`	Slides and presentation assets
`high-contrast`	Accessibility-first and maximum legibility

Type	Shape
`service`	Rounded rectangle
`database`	Cylinder
`decision`	Diamond
`terminal`	Stadium
`queue`	Parallelogram
`user`	Ellipse
`document`	Document
`formula`	Rectangle tuned for math content

Change the theme in the spec and re-render. Token-based styles will follow the new theme automatically.

Explicit color overrides do not change when the theme changes.

Mode	Meaning
`preserve-original`	Keep extracted source colors as explicit overrides
`theme-first`	Normalize the redraw to the selected theme

For academic-paper output:

Custom themes are JSON files that extend the theme schema. At minimum, define:

See the reference docs under skills/drawio/references/docs/design-system/.