Text-based Diagramming using Vite and Mermaid

3 min readSep 20, 2021

Use Vite and Mermaid for dynamic diagramming.

Photo by Christina @ wocintechchat.com on Unsplash


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 dependencies...
[4/4] Building fresh packages...
success Installed "create-vite@2.6.2" with binaries:
- create-vite
- cva
✔ Project name: … vite-mermaid
✔ Select a framework: › vanilla
✔ Select a variant: › vanilla-ts
Scaffolding project in /home/alpha2phi/workspace/dev/alpha2phi/vite-mermaid/vite-mermaid...Done. Now run:cd vite-mermaid
yarn dev
Done in 18.74s.

Run yarn install and yarn run dev to validate the application is working.

yarn install
yarn install v1.22.11
warning package.json: No license field
warning vite-mermaid@0.0.0: No license field
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.13s.
yarn run dev

Software engineer, Data Science and ML practitioner.