deep dive
Inside the Component Designer
A look at how Sysonaut lets you build your own components — layers, icons, a 2D representation, and reusable shapes you can save as SVG.
The palette ships with plenty of components, but the real power is building your own. The Component Designer is where that happens.
A component is a Shape plus meaning
Under the hood, a Component references a Shape — its visual blueprint — while carrying the domain meaning ("Firewall", "Router") that validation and the catalog will build on later. The Component Designer is where you author that visual layer.
What you can control
- Layers — stack geometric building blocks; each can float at its own elevation.
- Icons — place catalog icons (or short surface text) on the top, front or side faces, with background, colour and an adaptive "contrast" option.
- 2D representation — a single glyph that defines how the Shape reads in 2D, independent of the isometric layers.
- Hit Area — the floor footprint that anchors the label and connection ports.
Reuse everywhere
Save a component once and it joins your user-wide library — available in every project's palette, and exportable as SVG.
We will go deeper on layers and the icon pipeline in future posts.