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.

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.

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.

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 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

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.