Triton

Overview

Triton is a deterministic, contracts-first diagram compiler that transforms declarative text into byte-stable SVG (and PNG). It renders a broad family of diagrams behind a single rendering kernel: a Mermaid-compatible surface plus Triton-only extensions for composite posters, data structure visualizations, topology graphs, and timelines.

The VS Code extension adds the triton language for .triton files and provides a live preview panel that re-renders the diagram as you type — powered by the same compiler that produces the final output, so what you see is exactly what you get.

What It Renders

Mermaid-Compatible Diagrams

All standard Mermaid diagram types are supported, including flowchart, sequence, state, class, ER, Gantt, journey, mindmap, gitGraph, pie, xyChart, quadrant, radar, Sankey, Kanban, requirement, block, C4, architecture, packet, and timeline.

Triton Extensions

• poster — compose child diagrams in a grid with [cols] / [cols x rows] cell spanning and cross-diagram links between panels
• tree family — tree plus value-driven plan, avl, rbtree, btree, radix, segtree, and heap; structures are correct-by-construction
• struct family — array, linkedlist, memory, and page (slotted page)
• topology — cost-tiered node graphs with legends and nested groups (NUMA)

VS Code Extension

Live Preview

• Open a .triton or .mmd file and run Triton: Open Preview to the Side from the command palette or editor-title buttons
• The preview re-renders on every edit with a configurable debounce (default 150 ms)
• Parse errors show as a banner without blanking the last valid diagram

Mermaid Coexistence

Triton deliberately does not claim every .mmd file by default to avoid conflicting with an already-installed Mermaid extension. The explicit Open Preview command always renders the active file unconditionally. Passive handling of Mermaid content can be enabled via triton.enableMermaid.

Settings

Technical Architecture

Contracts-First Design

Every diagram kind implements a DiagramModule interface (parse → IR → layout → Scene), and a single renderer turns a Scene into SVG. The design specification lives in design/ as a LaTeX source of truth for the IR and rendering contracts — the spec figures are rendered by Triton itself.

Core Technologies

• TypeScript (strict, ESM-only, targeting Node ≥ 20 / ES2022)
• Peggy parsers generated from grammar files
• esbuild for bundling both the core library and the VS Code extension
• vitest test suite with runnable examples for every diagram kind

Repository Layout

src/         — contracts, kernel (graph/scene/text/style), diagrams, renderer
test/        — vitest suites
examples/    — *.mmd sources + rendered *.svg
extension/   — VS Code extension (self-contained satellite)
design/      — LaTeX design specification
packages/    — core and LaTeX npm packages