Gesso Architecture
Full Gesso architecture in C4 style, drawn with
Mermaid. One file per view, under views/.
Views
| View | Scope |
|---|---|
| System Landscape | Every software system and person |
| Container View: Gesso CMS | CMS abstraction layer |
| Container View: Gesso Commerce | Commerce abstraction layer |
| Container View: Gesso ERP | ERP abstraction layer |
| Container View: Gesso AI | AI abstraction layer |
| Container View: Gesso Authentication | Authentication and single sign-on |
| Container View: Gesso Design System | Base design system |
| Container View: Project Design System | Project-specific components |
| Container View: Drupal Headless | Drupal's APIs |
| Container View: Frontend A | Delivery application and its API middleware |
Viewing
Each view is a plain Mermaid code block, so it renders anywhere Mermaid is supported:
- The hosted architecture site, which gives every view its own page
- GitLab, when browsing any file under
views/ - VS Code, via the built-in Markdown preview
- The Mermaid live editor, by pasting a single block
There is no external service and no license to renew.
Editing
Add or edit a file in views/, then run pnpm build to regenerate the hosted
site. The sidebar is generated from the directory, with each file's
# Heading as its title. Add new views to the table above by hand.
The views follow C4 conventions:
| Element | Style | Label format |
|---|---|---|
| Person | #0b3d6e fill, #3b82f6 outline |
Name / [Person] |
| Gesso software system | #2563eb fill |
Name / [Software System] |
| Third-party software system | #64748b fill |
Name / [Software System] |
| Container | #dbeafe fill, #2563eb outline, dark text |
Name / [Container] / description |
| Boundary | Dashed #7d8794 outline, no fill |
Subgraph titled with the system in scope |
Every colour pair meets WCAG contrast (4.5:1 for text, 3:1 for shapes) on both light and dark backgrounds, because GitLab and the hosted site render these views in either theme. Relationships are dotted arrows, labelled with the protocol where the view is about how data arrives.
A container view shows the system's containers plus the people and systems connected to one of those containers. A relationship to the system as a whole appears only on the System Landscape, which is why some container views have no outside elements.
Layout is left-to-right (flowchart LR). People are drawn as boxes, and
boundary labels sit at the top of a subgraph.