🚀 Astro — Diagrams with Mermaid JS 🧜🏻♀️
Embed you Mermaid diagrams in no time inside your Astro templates.
Features server-side rendering and smart caching.
Available as a stand-alone component or as an MDX plugin, replacing mermaid code blocks on-the-fly.
Uses the mermaid library and puppeteer under the hood.
Warning
🚧 Still in beta.
📦 Installation
pnpm i mermaid astro-diagram🛠 Usage
---
import { Diagram, type Config } from 'astro-diagram';
const config = {
theme: 'forest',
// ...
} as Config;
const code = `
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?`;
// ...
---<!-- ... -->
<body>
<!-- Place component inside `BODY` tag -->
<Diagram config={config} code={code /* required */} />
<!-- ... -->
</body>With MD(X) code block
Warning
This is still a work-in-progress.
Some rendering bugs and inconsistencies remain.
In your astro.config.{ts,mjs}:
import remarkMermaid from 'astro-diagram/remark-mermaid';
// ...
export default defineConfig({
// ...
markdown: {
remarkPlugins: [
// remarkGfm,
remarkMermaid,
// ...
],
},
// ...
});Then, in your MD(X), use the mermaid language for your code fences, exactly like you would on GitHub flavored Markdown for example.
🎉 Result
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?To do
- [x] Offline / Node package import of mermaid instead of CDN (
headless-mermaidrelated). See Issue #43 - [x] Improve Astro MDX integration
Refs.:
See https://github.com/sjwall/mdx-mermaid
Unist visit: https://github.com/sjwall/mdx-mermaid/blob/main/src/mdxast-mermaid.ts - [ ] Fix styling and layout bugs
- [ ] Support dark / light color mode
- [ ] Full TypeScript compliance
- [ ] Test mermaid configs.
