πŸš€Β Β Astro β€” Diagrams with Mermaid JS πŸ§œπŸ»β€β™€οΈ


Embed you Mermaid diagrams inside your Astro templates. Features server-side rendering and smart caching.

Keywords:

  • astro
  • astro-component
  • mermaid
  • diagram
  • gantt
  • flowchart
  • charts
  • ssr
  • puppeteer
  • headless

Component live demo

AliceBobJohnBob thinks a longlong time, so longthat the text doesnot fit on a row.Hello Bob, how are you?How about you John?I am good thanks!I am good thanks!Checking with John...Yes... John, how are you?AliceBobJohn

πŸš€Β Β Astro β€” Diagrams with Mermaid JS πŸ§œπŸ»β€β™€οΈ

NPM Downloads ISC License PRs Welcome
Astro TypeScript Prettier EditorConfig ESLint

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

AliceBobJohnBob thinks a longlong time, so longthat the text doesnot fit on a row.Hello Bob, how are you?How about you John?I am good thanks!I am good thanks!Checking with John...Yes... John, how are you?AliceBobJohn

To do

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.6.1 (2022-10-17)

Note: Version bump only for package astro-diagram

0.6.0 (2022-10-17)

Features

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

0.10.0 (2022-07-30)

Features

Bug Fixes

  • safari not taking full width + some docs (d0fd6ad)
...

Licenses

Package
Author
License
URL
d3-collection
Mike Bostock
BSD-3-Clause
d3-voronoi
Mike Bostock
BSD-3-Clause
mermaid
Knut Sveidqvist
MIT
puppeteer
The Chromium Authors
Apache-2.0
unist-util-visit
Titus Wormer <tituswormer@gmail.com> (https://wooorm.com)
MIT

⚠️  Having an issue? / πŸ—£   Wanna share feedback or suggestion?

✍️  Open an Issue or a Pull Request   on GitHub -or-   Contact me   on my Website.