component

TuxDiagram

Mermaid wrapper for diagrams-as-code. Architecture diagrams, flowcharts, sequence diagrams, ERDs, gantt charts. Mermaid is a ~3MB dependency, so this component lazy-imports it on mount — pages that don't render a diagram pay nothing. Theme tracks page color-mode; brand maroon + neutrals are mapped into Mermaid's theme variables so diagrams read as part of the system.

canonical · flowchart

Agent watcher event flow

Figure 1

How an agent's local file events get to the central index. Heartbeat-aware buffering keeps disconnected agents from losing data.
<TuxDiagram
  eyebrow="Figure 1"
  caption="Agent watcher event flow."
  :code="flowchart"
/>

sequence diagram

tti-ai-studio session flow

Sequence diagrams show actors and message order. Right for explaining RAG pipelines, auth flows, agent ↔ central protocols — anything where the order matters.

Figure 2

One question, end-to-end. The retrieval step also fetches ITAR markers so the studio can refuse out-of-scope exports.

entity-relationship

Corpus / document / chunk schema

Figure 3

Landscape's index schema, simplified. Real schema has audit trails, classifier outputs, and retention metadata.

composition

Markdown source for diagrams

For docs surfaces that author content in markdown, the same diagram works as either a ::tux-diagram block (with the Mermaid source as the body) or a fenced ```mermaid block (which MDC also handles). The Vue version is for Vue-authored pages; the markdown shorthand is for authors who don't want to leave the prose.

docs/agent-watcher.mdmd
# Agent watcher

How a file event gets from disk to the central index:

::tux-diagram{eyebrow="Figure 1" caption="Watcher event flow."}
flowchart TD
  A[File event on disk] --> B{Watcher coalesce}
  B --> C[Batch event payload]
  C --> D[Ship to central index]
::

props

Props reference

  • code — Mermaid source as a string. Required.
  • eyebrow — small label above (e.g. "Figure 3").
  • caption — figcaption below the rendered diagram.
  • Mermaid loads lazily on mount; the diagram re-renders when the color-mode flips.
  • Render errors surface inline with the Mermaid parser message — useful when authoring.