MCP SERVER

SVG-TOOLS

10 diagram forms rendered as SVG — layout, sizing, and color assignment are automatic.

11
Tools
10
Diagram types
10
Lib modules
1
External deps
TOOLS
ToolPurposeReturns
pipelineSequential process as connected stages with labeled transitions. Horizontal or vertical direction.SVG file at outputPath
fanoutOne source fans out to multiple targets via labeled edges. One-to-many distribution.SVG file at outputPath
topologyNetwork of connected systems with optional node grouping. Edges carry labels and styles.SVG file at outputPath
layer_stackStacked architecture layers, each containing items. Arrows connect layers vertically.SVG file at outputPath
sequenceTemporal message flow between participants. Lifelines with sync, async, and reply messages.SVG file at outputPath
state_machineEntity lifecycle with states, transitions, guards, self-loops, and initial/terminal markers.SVG file at outputPath
swimlaneCross-functional process flow. Steps belong to lanes, edges cross boundaries to show handoffs.SVG file at outputPath
cycleCircular process — stages arranged in a ring with the last connecting back to the first.SVG file at outputPath
seam_mapDomain integration through shared state. Areas connected by labeled arcs over a shared spine.SVG file at outputPath
treeMulti-level hierarchy with parent-child relationships. Multiple roots and two directions.SVG file at outputPath
compileYAML-first workflow — declare type, scheme, and data in one spec file. Dispatches to the matching renderer.SVG file at outputPath
BUDGET-AWARE LAYOUT
The Old Model

Content determines the viewBox. The display container scales it down. Fonts shrink proportionally — a 14px label becomes 9px when the SVG is squeezed into a narrow embed. More nodes means smaller text, and the author has no control over when it becomes unreadable.

The New Model

Display width IS the viewBox width. Content must fit within it. Font sizes in the viewBox are the rendered font sizes — no scaling math. The budget module computes what fits given a width constraint, measures labels, scales fonts down to a floor, then truncates with ellipsis as a last resort. The result: 14px stays 14px.

The budget calculator works in five steps: reserve canvas padding from display width, size gaps to actual edge label content, compute per-node width from remaining space, fit labels by trying preferred font size then scaling down, and derive node height from resolved font metrics. Every dimension is a consequence of the text it contains.

FOUR CATEGORIES
Sequential
pipeline · cycle

Ordered stages connected by arrows. Pipeline renders a linear chain with labeled transitions between steps. Cycle arranges stages in a ring where the last connects back to the first. Both support density control and automatic color distribution from the scheme.

Distribution
fanout · tree

One-to-many relationships. Fanout shows a single source distributing to multiple targets with labeled edges. Tree renders parent-child hierarchies with automatic subtree centering — supports multiple roots (forest) and both top-down and left-right directions.

Structural
topology · layer_stack · seam_map

System architecture. Topology renders a network graph with grouped nodes and styled edges. Layer stack shows abstraction levels with items inside each layer. Seam map visualizes domain integration — autonomous areas connected by labeled arcs over a shared state spine.

Lifecycle
state_machine · sequence · swimlane

Temporal and behavioral flows. State machine renders entity lifecycles with guards, self-loops, and terminal markers. Sequence shows message flow between participants over time. Swimlane adds cross-functional lanes where steps belong to actors and edges show handoffs.

INTEGRATION
chromata
Upstream

All color assignment flows through chromata. The palette module resolves scheme names to per-node hue assignments, shade steps, and structural theme context. Color functions like mono:sky and grad:sky:violet are resolved by chromata's shared module.

xhtml-tools
Downstream

Page specs can embed diagram blocks that reference YAML diagram specs. The compiled SVGs are uploaded as Confluence attachments and embedded via ac:image macros in the published page.

wiki
Downstream

wiki_diagram_publish uploads SVG files as page attachments and returns the ac:image embed XHTML. Stable filenames enable iterative refinement — re-upload overwrites the previous version.

The diagrams on this page were rendered by the server this page describes.