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.

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 three formats:

• PNG — raster image (free)
• SVG — scalable vector image (requires a license)
• Draw.io — editable .drawio (mxfile) XML (requires a license)

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

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

Mermaid Compatible

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

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 and Draw.io export are premium features and require a valid Trellis license. Without one, those exports report license required.

To activate a license:

1. Purchase a key at trellis.lemonsqueezy.com/buy.
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

Feedback & Issues

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