Keywords:
- astro
- astro-component
- mermaid
- diagram
- gantt
- flowchart
- charts
- ssr
- puppeteer
- headless
🚀 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
To do
- Offline / Node package import of mermaid instead of CDN (
headless-mermaidrelated). See Issue #43 - 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.
TypeScript API
name
type
required
default
config
mermaidAPI.Config
false
{}
code
string
true
''
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
0.7.0 (2023-03-15)
Features
0.6.3 (2023-01-05)
Note: Version bump only for package astro-diagram
0.6.2 (2022-11-19)
Note: Version bump only for package astro-diagram
0.6.1 (2022-10-17)
Note: Version bump only for package astro-diagram
0.6.0 (2022-10-17)
Features
- default export for mdx plugin (1b4f0b4)
- init diagram component (0468e2e)
- init mdx plugin (f1f17ae)
- use node package instead of cdn #43 (e480f9f)
Bug Fixes
- property not required (cfff64f)
- remove package prefix, simplify import method (73bd31b)
- remove wrong dependency (d286e6e)
- safari not taking full width + some docs (d0fd6ad)
- update mermaid and imagetools (2a5642d)
0.12.3 (2022-09-22)
Note: Version bump only for package @julian_cataldo/astro-diagram
0.12.2 (2022-09-20)
Bug Fixes
- update mermaid and imagetools (2a5642d)
0.12.1 (2022-08-25)
Note: Version bump only for package @julian_cataldo/astro-diagram
0.12.0 (2022-08-21)
Features
0.11.3 (2022-08-20)
Note: Version bump only for package @julian_cataldo/astro-diagram
0.11.2 (2022-08-06)
Note: Version bump only for package @julian_cataldo/astro-diagram
0.11.1 (2022-07-31)
Bug Fixes
- remove wrong dependency (d286e6e)
0.11.0 (2022-07-31)
Features
Bug Fixes
- property not required (cfff64f)
0.10.0 (2022-07-30)
Features
- init diagram component (0468e2e)
Bug Fixes
- safari not taking full width + some docs (d0fd6ad)
...
Licenses
Package
Author
License
URL
puppeteer
The Chromium Authors
Apache-2.0
-
unist-util-visit
Titus Wormer <tituswormer@gmail.com> (https://wooorm.com)
MIT
-