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.

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.

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.

Settings

Feedback & Issues

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