This is a simple Astro web application that provides the ability to store and show Mermaid diagrams in a central web page.
The purpose of this project is not to be a standalone web app, that will allow you to edit and view mermaid files from the UI, but rather a collection point for those diagrams, meaning you will have to rebuild the site every time you add a new diagram. That being said, it is fast and efficient way to store and view Mermaid Diagrams
First clone this repository using:
To run a development server, run (from the project root):
npm run dev
To build a production website, run (from the project root):
npm run build
All of the CSS files are kept in the style folder, and the Mermaid and project configurations are defined in constants.ts.
Adding a diagram requires a few steps:
- Create a new file in
diagrams/and populate it with the following code.
<div class="diagram">
<h2><!-- Title --></h2>
<!-- Description -->
<pre class="mermaid">
<!-- Mermaid Diagram -->
</pre>
</div>- Either create a new astro collection file, or use one of the current files and the import to the top of the file.
import First from '../diagrams/example/first.astro';- Call the content from the import, wherever you would like it.
<div>
<First />
</div>To add a new diagram page, (A place to collect all diagrams related to one subject), use this procedure.
Note: This should be handled by a script in the future
- Add a new folder to the
diagramsfolder. - Add a new page in pages with the name of your collection/page followed by .astro. Populate it with the following content:
---
import Navbar from '../components/navbar.astro';
import '../style/main.css';
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Examples</title>
</head>
<body>
<Navbar />
<div class="page">
<h1>Example</h1>
<div class="diagram-section">
</div>
</div>
<script type="module" src='./scripts/initMermaid.ts'></script>
</body>
</html>- Change the
<title>and the<h1>tag to the page/collection name you would like to use. - Add a navbar entry to
navbar.astroby adding the following code block. (Replacing example with your preferred name.)
<div class="nav-content">
<h3><a href="/example">Example</a></h3>
</div>Now you can proceed with adding diagrams.
This project is built with Astro and exists to serve Mermaid JS files. Other than that, everything else is pure HTML, CSS and TypeScript.
