Text-based Diagramming using Vite and Mermaid

Use Vite and Mermaid for dynamic diagramming.

Photo by Christina @ wocintechchat.com on Unsplash

Overview

In this article, let’s use Vite and Mermaid to prototype a simple application for dynamic diagramming.

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. You can use it with vanilla Javascript/Typescript, or your favorite frameworks like React, Vue, Preact, LitElement, or Svelte.

Mermaid is a Javascript-based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

There are several advantages to using a text-based approach for diagramming.

• Version control is easy now. The developer can track changes made to the diagrams easily. Diagrams are now treated as part of your source code repository.
• With a tool like Mermaid, I can render the diagram immediately once changes are made.

Vite Setup

Let’s get started by setting up Vite.

I create a vanilla Typescript project called vite-mermaid by running yarn create vite.

❯ yarn create vite
yarn create v1.22.11
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking…