Use Vite and Mermaid for dynamic diagramming.
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 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-tsScaffolding project in /home/alpha2phi/workspace/dev/alpha2phi/vite-mermaid/vite-mermaid...Done. Now run:cd vite-mermaid
yarn
yarn devDone 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
