Architecture Diagram
Isometric architecture diagram combining exploded-view layering with cross-hatching for infrastructure layers.
Preview
Import
import { ArchitectureDiagram } from "@sigil-ui/components";Usage
<ArchitectureDiagram
title="Production architecture"
gap="var(--s-space-3)"
layers={[
{ label: "Interface", children: <span className="text-sm text-[var(--s-text)]">React application</span> },
{ label: "Services", children: <span className="text-sm text-[var(--s-text)]">API + workers</span> },
{ label: "Data", children: <span className="text-sm text-[var(--s-text)]">Postgres + cache</span>, hatched: true },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
layers | ArchitectureLayer[] | — | Layers from top (highest abstraction) to bottom (infrastructure). |
title | string | — | Title for the diagram. |
gap | string | 1.5rem | Gap between layers. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-card-radius | Card radius |
--s-border-style | Border style |
--s-border | Border |
--s-surface | Surface |
--s-shadow-sm | Shadow sm |
--s-text | Text |
--s-radius-md | Radius md |
--s-duration-fast | Duration fast |
--s-shadow-md | Shadow md |
--s-border-strong | Border strong |
--s-surface-elevated | Surface elevated |
--s-background | Background |