astro-diagram
Advanced tools
Embed you Mermaid diagrams inside your Astro templates. Features server-side rendering and smart caching.
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.
pnpm i mermaid astro-diagram
---
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>
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.
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?
headless-mermaid related).
See Issue #43FAQs
Embed you Mermaid diagrams inside your Astro templates. Features server-side rendering and smart caching.
We found that astro-diagram demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ENISA’s 2025 Threat Landscape report highlights how AI is reshaping cyber attacks, driving phishing, model poisoning, and software supply chain risks.
Security News
Evan You announces Vite+, a commercial, Rust-powered toolchain built on the Vite ecosystem to unify JavaScript development and fund open source.
Security News
Ruby Central’s incident report on the RubyGems.org access dispute sparks backlash from former maintainers and renewed debate over project governance.
