Visuals & diagrams

# ZajLibrary — authoring & site docs

You are a **ZajLibrary documentation assistant**. This is a meta page about the library itself — you help the user author or audit pages per the writing-style and component rules.

**Mission:** Help the user author or audit ZajLibrary pages per the writing-style and component rules referenced below.

## Metadata
- title: Visuals & diagrams
- url: https://library.zajapps.com/zajlibrary/authoring/content-system/resources/reference/visuals/
- shelf: Resources
- doc_type: site documentation
- status: current
- kind: reference
- category: zajlibrary
- subcategory: authoring
- topic: content-system
- description: When to add a diagram, which component to reuse, and how to ship new SVG — agent map for the warrant test and diagram inventory.
- tags: system, visuals, diagrams

## Authoring rules
- Help the user author or audit ZajLibrary pages per the writing-style and component rules referenced here.
- Prefer Starlight components and the visuals/warrant-test contract over raw HTML or undiagrammed walls of text.
- Cite the specific rule or section you are applying.

---

# Visuals & diagrams

<p class="eyebrow">System docs · visuals</p>

**Binding rule:** sections that convey a **process**, **structure/relationship**, or **change over time** must carry a diagram — see [Writing style → Visuals](/zajlibrary/authoring/content-system/resources/reference/writing-style/#visuals-are-mandatory-where-warranted).

## Start here

<CardGrid>
  <LinkCard title="Doc components (live gallery)" href="/zajlibrary/authoring/content-system/resources/reference/doc-components/" description="RuntimeOwnership, LayerStack, StepStack, …" />
  <LinkCard title="Warrant test + tool table" href="/zajlibrary/authoring/content-system/resources/reference/doc-components/#when-to-reach-for-a-visual-and-which-one" description="Process vs structure vs timeline → pick tool" />
  <LinkCard title="Authoring capabilities" href="/zajlibrary/authoring/content-system/resources/reference/authoring-capabilities/" description="Full plugin + diagram inventory" />
</CardGrid>

## Shipped diagram components

| Component | Use when |
| --- | --- |
| `DiagramFigure` | Frame + caption for inline SVG |
| `RuntimeOwnership` | Single runtime / request authority |
| `PackageBoundary` | What talks to what |
| `StageFlow` | Horizontal pipeline |
| `LayerStack` | Tiers / layers |
| `StepStack` | Vertical numbered procedure |
| `Timeline` | Phases over time |
| `PatternPair` | Before ↔ after |
| `ContentDecisionTree` | Branching classification |

Import from `~/components/diagrams/…` in **`.mdx`** only. Styles: `.zaj-diagram-*` in `src/styles/diagrams.css`.

## Mermaid (plain `.md` or `.mdx`)

Default edge style: **orthogonal** (`stepAfter` in `astro.config.mjs`). Use for arbitrary graphs when no bespoke layout is needed.

## Worked examples with strong visuals

| Page | Visuals used |
| --- | --- |
| [Build an MCP server](/ai-systems/integrations/ai-agent-integration/learn/guides/mcp/build-an-mcp-server/) | 2× Mermaid + `<FileTree>` |
| [Content architecture](/zajlibrary/authoring/content-system/resources/reference/content-architecture/) | Mermaid reader-moment graph |
| [System docs home](/zajlibrary/system/platform/) | `ContentDecisionTree` component |

## When to create a new component

Add under `src/components/diagrams/` when:

- The same editorial layout will appear on **3+ pages**
- Mermaid cannot hit layout/styling requirements
- You need token-themed, accessible, responsive SVG (never screenshots)

Run the visual QC gate in `AGENTS.md` before merge.

# Visuals & diagrams

> Source: https://library.zajapps.com/zajlibrary/authoring/content-system/resources/reference/visuals/

<p class="eyebrow">System docs · visuals</p>

**Binding rule:** sections that convey a **process**, **structure/relationship**, or **change over time** must carry a diagram — see [Writing style → Visuals](/zajlibrary/authoring/content-system/resources/reference/writing-style/#visuals-are-mandatory-where-warranted).

## Start here

<CardGrid>
  <LinkCard title="Doc components (live gallery)" href="/zajlibrary/authoring/content-system/resources/reference/doc-components/" description="RuntimeOwnership, LayerStack, StepStack, …" />
  <LinkCard title="Warrant test + tool table" href="/zajlibrary/authoring/content-system/resources/reference/doc-components/#when-to-reach-for-a-visual-and-which-one" description="Process vs structure vs timeline → pick tool" />
  <LinkCard title="Authoring capabilities" href="/zajlibrary/authoring/content-system/resources/reference/authoring-capabilities/" description="Full plugin + diagram inventory" />
</CardGrid>

## Shipped diagram components

| Component | Use when |
| --- | --- |
| `DiagramFigure` | Frame + caption for inline SVG |
| `RuntimeOwnership` | Single runtime / request authority |
| `PackageBoundary` | What talks to what |
| `StageFlow` | Horizontal pipeline |
| `LayerStack` | Tiers / layers |
| `StepStack` | Vertical numbered procedure |
| `Timeline` | Phases over time |
| `PatternPair` | Before ↔ after |
| `ContentDecisionTree` | Branching classification |

Import from `~/components/diagrams/…` in **`.mdx`** only. Styles: `.zaj-diagram-*` in `src/styles/diagrams.css`.

## Mermaid (plain `.md` or `.mdx`)

Default edge style: **orthogonal** (`stepAfter` in `astro.config.mjs`). Use for arbitrary graphs when no bespoke layout is needed.

## Worked examples with strong visuals

| Page | Visuals used |
| --- | --- |
| [Build an MCP server](/ai-systems/integrations/ai-agent-integration/learn/guides/mcp/build-an-mcp-server/) | 2× Mermaid + `<FileTree>` |
| [Content architecture](/zajlibrary/authoring/content-system/resources/reference/content-architecture/) | Mermaid reader-moment graph |
| [System docs home](/zajlibrary/system/platform/) | `ContentDecisionTree` component |

## When to create a new component

Add under `src/components/diagrams/` when:

- The same editorial layout will appear on **3+ pages**
- Mermaid cannot hit layout/styling requirements
- You need token-themed, accessible, responsive SVG (never screenshots)

Run the visual QC gate in `AGENTS.md` before merge.

System docs · visuals

Binding rule: sections that convey a process, structure/relationship, or change over time must carry a diagram — see Writing style → Visuals.

Start here

Doc components (live gallery) RuntimeOwnership, LayerStack, StepStack, …

Warrant test + tool table Process vs structure vs timeline → pick tool

Authoring capabilities Full plugin + diagram inventory

Shipped diagram components

Component	Use when
`DiagramFigure`	Frame + caption for inline SVG
`RuntimeOwnership`	Single runtime / request authority
`PackageBoundary`	What talks to what
`StageFlow`	Horizontal pipeline
`LayerStack`	Tiers / layers
`StepStack`	Vertical numbered procedure
`Timeline`	Phases over time
`PatternPair`	Before ↔ after
`ContentDecisionTree`	Branching classification

Import from ~/components/diagrams/… in .mdx only. Styles: .zaj-diagram-* in src/styles/diagrams.css.

Mermaid (plain `.md` or `.mdx`)

Default edge style: orthogonal (stepAfter in astro.config.mjs). Use for arbitrary graphs when no bespoke layout is needed.

Worked examples with strong visuals

Page	Visuals used
Build an MCP server	2× Mermaid + `<FileTree>`
Content architecture	Mermaid reader-moment graph
System docs home	`ContentDecisionTree` component

When to create a new component

Add under src/components/diagrams/ when:

The same editorial layout will appear on 3+ pages
Mermaid cannot hit layout/styling requirements
You need token-themed, accessible, responsive SVG (never screenshots)

Run the visual QC gate in AGENTS.md before merge.

# ZajLibrary — authoring & site docs

You are a **ZajLibrary documentation assistant**. This is a meta page about the library itself — you help the user author or audit pages per the writing-style and component rules.

**Mission:** Help the user author or audit ZajLibrary pages per the writing-style and component rules referenced below.

## Metadata
- title: Visuals & diagrams
- url: https://library.zajapps.com/zajlibrary/authoring/content-system/resources/reference/visuals/
- shelf: Resources
- doc_type: site documentation
- status: current
- kind: reference
- category: zajlibrary
- subcategory: authoring
- topic: content-system
- description: When to add a diagram, which component to reuse, and how to ship new SVG — agent map for the warrant test and diagram inventory.
- tags: system, visuals, diagrams

## Authoring rules
- Help the user author or audit ZajLibrary pages per the writing-style and component rules referenced here.
- Prefer Starlight components and the visuals/warrant-test contract over raw HTML or undiagrammed walls of text.
- Cite the specific rule or section you are applying.

---

# Visuals & diagrams

<p class="eyebrow">System docs · visuals</p>

**Binding rule:** sections that convey a **process**, **structure/relationship**, or **change over time** must carry a diagram — see [Writing style → Visuals](/zajlibrary/authoring/content-system/resources/reference/writing-style/#visuals-are-mandatory-where-warranted).

## Start here

<CardGrid>
  <LinkCard title="Doc components (live gallery)" href="/zajlibrary/authoring/content-system/resources/reference/doc-components/" description="RuntimeOwnership, LayerStack, StepStack, …" />
  <LinkCard title="Warrant test + tool table" href="/zajlibrary/authoring/content-system/resources/reference/doc-components/#when-to-reach-for-a-visual-and-which-one" description="Process vs structure vs timeline → pick tool" />
  <LinkCard title="Authoring capabilities" href="/zajlibrary/authoring/content-system/resources/reference/authoring-capabilities/" description="Full plugin + diagram inventory" />
</CardGrid>

## Shipped diagram components

| Component | Use when |
| --- | --- |
| `DiagramFigure` | Frame + caption for inline SVG |
| `RuntimeOwnership` | Single runtime / request authority |
| `PackageBoundary` | What talks to what |
| `StageFlow` | Horizontal pipeline |
| `LayerStack` | Tiers / layers |
| `StepStack` | Vertical numbered procedure |
| `Timeline` | Phases over time |
| `PatternPair` | Before ↔ after |
| `ContentDecisionTree` | Branching classification |

Import from `~/components/diagrams/…` in **`.mdx`** only. Styles: `.zaj-diagram-*` in `src/styles/diagrams.css`.

## Mermaid (plain `.md` or `.mdx`)

Default edge style: **orthogonal** (`stepAfter` in `astro.config.mjs`). Use for arbitrary graphs when no bespoke layout is needed.

## Worked examples with strong visuals

| Page | Visuals used |
| --- | --- |
| [Build an MCP server](/ai-systems/integrations/ai-agent-integration/learn/guides/mcp/build-an-mcp-server/) | 2× Mermaid + `<FileTree>` |
| [Content architecture](/zajlibrary/authoring/content-system/resources/reference/content-architecture/) | Mermaid reader-moment graph |
| [System docs home](/zajlibrary/system/platform/) | `ContentDecisionTree` component |

## When to create a new component

Add under `src/components/diagrams/` when:

- The same editorial layout will appear on **3+ pages**
- Mermaid cannot hit layout/styling requirements
- You need token-themed, accessible, responsive SVG (never screenshots)

Run the visual QC gate in `AGENTS.md` before merge.

# Visuals & diagrams

> Source: https://library.zajapps.com/zajlibrary/authoring/content-system/resources/reference/visuals/

<p class="eyebrow">System docs · visuals</p>

**Binding rule:** sections that convey a **process**, **structure/relationship**, or **change over time** must carry a diagram — see [Writing style → Visuals](/zajlibrary/authoring/content-system/resources/reference/writing-style/#visuals-are-mandatory-where-warranted).

## Start here

<CardGrid>
  <LinkCard title="Doc components (live gallery)" href="/zajlibrary/authoring/content-system/resources/reference/doc-components/" description="RuntimeOwnership, LayerStack, StepStack, …" />
  <LinkCard title="Warrant test + tool table" href="/zajlibrary/authoring/content-system/resources/reference/doc-components/#when-to-reach-for-a-visual-and-which-one" description="Process vs structure vs timeline → pick tool" />
  <LinkCard title="Authoring capabilities" href="/zajlibrary/authoring/content-system/resources/reference/authoring-capabilities/" description="Full plugin + diagram inventory" />
</CardGrid>

## Shipped diagram components

| Component | Use when |
| --- | --- |
| `DiagramFigure` | Frame + caption for inline SVG |
| `RuntimeOwnership` | Single runtime / request authority |
| `PackageBoundary` | What talks to what |
| `StageFlow` | Horizontal pipeline |
| `LayerStack` | Tiers / layers |
| `StepStack` | Vertical numbered procedure |
| `Timeline` | Phases over time |
| `PatternPair` | Before ↔ after |
| `ContentDecisionTree` | Branching classification |

Import from `~/components/diagrams/…` in **`.mdx`** only. Styles: `.zaj-diagram-*` in `src/styles/diagrams.css`.

## Mermaid (plain `.md` or `.mdx`)

Default edge style: **orthogonal** (`stepAfter` in `astro.config.mjs`). Use for arbitrary graphs when no bespoke layout is needed.

## Worked examples with strong visuals

| Page | Visuals used |
| --- | --- |
| [Build an MCP server](/ai-systems/integrations/ai-agent-integration/learn/guides/mcp/build-an-mcp-server/) | 2× Mermaid + `<FileTree>` |
| [Content architecture](/zajlibrary/authoring/content-system/resources/reference/content-architecture/) | Mermaid reader-moment graph |
| [System docs home](/zajlibrary/system/platform/) | `ContentDecisionTree` component |

## When to create a new component

Add under `src/components/diagrams/` when:

- The same editorial layout will appear on **3+ pages**
- Mermaid cannot hit layout/styling requirements
- You need token-themed, accessible, responsive SVG (never screenshots)

Run the visual QC gate in `AGENTS.md` before merge.