Trellis Mermaid Preview

Instant, beautiful diagram previews for your Mermaid files — right inside VS Code.

What is Trellis?

Trellis is a next-generation Mermaid diagram renderer that produces clean, overlap-free diagrams with crisp orthogonal edge routing. Where stock renderers let edges tangle and overlap, Trellis routes every connection precisely — the result is diagrams that are easier to read and share.

Features

Live Preview

Open any .mmd or .mermaid file and see your diagram rendered instantly. The preview updates as you type — no manual refresh needed. Live preview is free, no license required.

Review diagram

Open any .mmd or .mermaid file and see your diagram in an interactive preview tool. All nodes and edges are selectable. The details are displayed on the right panel. You can trace entire data flows. This feature needs valid license.

Tag a node with a %% trellis tag a, b comment placed directly above it — any other Mermaid renderer just sees a comment. Tagged nodes show their tags in the details panel and in a clickable tag legend for highlighting nodes by tag, both in the live preview and in exported Interactive HTML. In C4 diagrams, %% trellis c4role frontend|app|gateway|bucket|folder above a Container(...) renders the matching custom container shape while other Mermaid renderers still see a plain container.

Side-by-Side Editing

Preview your diagram alongside your source with Open Preview to the Side (Ctrl+Shift+V / Cmd+Shift+V). Edit on the left, see results on the right.

Markdown Mermaid Blocks

Trellis also works inside Markdown. Place your cursor in a fenced ```mermaid block in any .md file, then preview or export that block directly — no need to extract it to a separate file.

Export Diagrams

Export the current diagram to disk in four formats:

• PNG — raster image (free)
• SVG — scalable vector image (requires a license)
• Draw.io — editable .drawio (mxfile) XML (requires a license)
• HTML - interactive standalone HTML file for validation purposes (requires a license)

Run Trellis: Export Diagram… to pick a format, or use the dedicated Export as SVG / PNG / Draw.io / Interactive HTML commands. The export button is also available in the editor toolbar and right-click menu.

Anonymize Diagrams

Need to report a rendering problem but can't share the diagram because its names are confidential? Anonymize rewrites a diagram so every piece of text — ids, labels, descriptions, class members, ER attributes, comments and the frontmatter title — becomes random characters of the same length and character class. The same word always becomes the same replacement, so connections stay intact, and shapes, structure and styling are kept, so the result still reproduces layout and routing problems. Requires a license.

• Trellis: Anonymize Diagram in Place — replaces the current .mmd file, or the Markdown block under the cursor, with its anonymized version. It is an ordinary editor edit: nothing is saved until you save, and undo (Ctrl/Cmd+Z) restores the original.
• Trellis: Copy Anonymized Diagram — puts the anonymized diagram on the clipboard.
• Trellis: Save Anonymized Diagram… — saves it to a new file (default <name>.anon.mmd). It refuses to overwrite the source file.

Both work on a .mmd / .mermaid file or, in Markdown, on the ```mermaid block under the cursor, and are also in the editor's right-click menu. Supported diagram types: flowchart, class, ER, C4 and architecture. The result is re-parsed and compared with the original; if anything differs, nothing is produced. Text width is only approximated, and %% trellis commands and %%{init}%% directives are copied unchanged — review the output before you share it.

Crisp, Overlap-Free Diagrams

Trellis uses precision edge routing to ensure connections never cross nodes or pile on top of each other. The result is diagrams that communicate clearly at every scale.

Supports Multiple Diagram Types

• Flowcharts — decision trees, process flows
• C4 Diagrams — software architecture and system context maps

Fallback Rendering for Other Diagram Types

Trellis doesn't natively render every Mermaid type yet (sequence diagrams, Gantt charts, pie charts, and others). For those, preview falls back to Mermaid.js so the pane still shows a real diagram instead of going blank — free, no license needed. SVG/PNG/HTML export work the same way for fallback types; Draw.io export is not available for them since it needs Trellis's own layout geometry.

Mermaid Compatible

Trellis reads standard Mermaid syntax — no migration, no new language to learn. Your existing .mmd files work as-is.

Pan & Zoom

The preview is a real viewport, not a fixed-size image — large diagrams fill the panel width instead of shrinking to fit, and small diagrams scale up instead of floating undersized. Zooming in on the Trellis (PNG) path automatically re-renders at a higher resolution so text stays crisp instead of pixelating.

Zoom and pan are remembered per document (trellis.preview.rememberView) and restored the next time you open that file's preview. Use Trellis: Zoom In / Zoom Out / Reset Zoom / Fit Width / Fit Page from the Command Palette, or Ctrl/Cmd+=, Ctrl/Cmd+-, Ctrl/Cmd+0 while the preview panel is focused.

Trellis Flow

Trellis Flow is part of the paid license (every tier). Without a license the Trellis view in the activity bar shows what the feature does with a short demo, a link to trellislab.net and the steps to enter a key; nothing is scanned and no panel opens. Enter a key with Trellis: Enter License Key… and the view unlocks right away. If you tried a Flow command first and chose Enter license key from the prompt, it runs as soon as the key is accepted. Removing the key closes the panel and locks the view again.

The Trellis icon in the activity bar opens four collapsible panes. They scan a folder for C4 models and Mermaid sequenceDiagrams (in .mmd, .mermaid and Markdown files) so a sequence can later be stepped through on top of a C4 diagram. Picking a sequence opens the Trellis Flow panel, which steps through it on top of the C4 diagram. Drag the divider between the diagram and the details column to resize it (double-click resets the width, and the width is remembered). The sequence diagram in that column follows trellisFlow.sequenceFontSize (8–16 px, default 10) and trellisFlow.sequenceFontWeight (normal or bold) and trellisFlow.sequenceLineWidth (arrow width, 0.5–4 px, default 1.2); spacing scales with the size and changes apply live.

• Source: the scanned folder, with counts. The pane toolbar has Use Folder as Source and Rescan; the row has a clear button.
• C4 Model: the C4 models found, each with how many of the active sequence's participants it matches (also in the pane header). The chosen one is marked; click another to pin it (a pinned model has an unpin button), otherwise the best match is used. Models with parse errors open at the failing line.
• Sequences: the sequence diagrams found, in subfolder groups, with step counts and a warning icon for diagrams with problems. The pane header shows the count; the active sequence has a play icon. Click one to make it active and open the panel; the hover button opens its source. Press Ctrl/Cmd+F in the pane to filter by name.
• Validation: participants missing from the C4 model (with a "did you mean" hint, or "Shown as temp node") and messages with no C4 relation (with the Rel(…) to add). The header shows the number of problems; click a row to open the line.

Each pane explains itself when it is empty: no folder chosen, no C4 model, no sequences, no problems.

The Flow panel shows the C4 diagram with the current step lit up: its edges in blue and its nodes tinted with their own border colour, everything else fading with distance from the step. Participants missing from the C4 model are drawn as dashed temporary nodes, and messages with no C4 relation as dashed ad-hoc edges. The right column has a card for the current step and a mini sequence diagram that scrolls under the card, keeping the participant names at its top; click a row to jump to it, double-click (or the file:line link) to open that line. Mermaid blocks (loop, alt / else, opt, par, critical / option, break, rect) are drawn as tinted sections around their steps, nested inside each other, with a header showing the keyword, its text and the step count, and a dashed line for each else / option. Sections holding the current step take the block's colour; click a header to fold or unfold the section. The card lists the enclosing blocks, outermost first; click one to open its line. Blocks inside a par are not drawn, since a par's branches play side by side. Mermaid notes (Note left of A, Note right of A, Note over A,B) are drawn as boxes on the lifelines right after the step they follow, with <br> line breaks; the current step's notes are outlined and repeated in its card with a link to their source line. Click a note to jump to its step, double-click it to open the note's line. Dotted synchronous arrows (-->>) are returns; async arrows (-) solid, --) dotted) are fire-and-forget calls with an open arrowhead, so no reply is expected and they are never treated as returns.

The diagram is live SVG with a travelling dot along the active edge. When zoomed in past Fit, Follow step glides the view just far enough to bring the current step's nodes and edges into sight, and zooms out if they do not fit; it leaves the view alone when they are already visible. Dragging, scrolling or the zoom buttons stop a glide in progress, and the checkbox keeps its state when the file is edited.

Editing while the panel is open. Save the sequence or the C4 file and the panel picks it up:

• Idle: it stays on the same message even if steps were added or removed above it, and a banner says what moved. New and changed steps carry a NEW / CHANGED tag in the list until you step on.
• Playing: playback pauses and a banner offers Reload or Show changes (marks the differences in the list first), so the view does not shift mid-walkthrough.
• Invalid file: the last valid version stays on screen with an Open at line N button; the banner clears once the file parses again.

Changes are read from disk, so save the file first.

• Right-click a folder in the Explorer → Trellis Flow: Use Folder as Source (default: the first workspace folder).
• Right-click a C4 file → Trellis Flow: Set as C4 Model; a C4 or sequence file → Trellis Flow: Open in Trellis Flow.
• Trellis Flow: Choose C4 File… (Command Palette or the view) pins a C4 file from anywhere; outside the source folder, its folder becomes the source.
• Trellis Flow: Next Step / Previous Step / Play / Pause drive the open panel (also ← → Space while it is focused).
• Trellis Flow: Rescan (view toolbar) scans again; file changes are picked up automatically.

Getting Started

1. Open any .mmd or .mermaid file in VS Code.
2. Press Ctrl+Shift+V (Windows/Linux) or Cmd+Shift+V (Mac) to open the live preview.
3. Edit your diagram — the preview updates automatically.

You can also right-click in the editor and choose Trellis: Open Preview, or use the preview icon in the editor toolbar.

Licensing

Live preview and PNG export are free — no license needed.

SVG, Draw.io and HTML export, the review tool, Anonymize and Trellis Flow are premium features and require a valid Trellis license. Without one, exports report license required and the Anonymize commands offer to open Trellis: Enter License Key….

To activate a license:

1. Purchase a key at https://trellislab.net.
2. Run Trellis: Enter License Key… from the Command Palette and paste your key.
3. Reopen any preview to apply.

Run the same command with an empty value to remove a stored key.

Documentation

Full documentation is available at trellis-lab.github.io/trellis.

Settings

trellisFlow.travelDot and followStep apply to the licensed live view only.

Community

Join the Trellis Discord for support, feature discussion, and release announcements.

Feedback & Issues

Found a bug or have a feature request? Please open an issue on GitHub.