astro-diagram

0.7.0 • Public • Published

🚀  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

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

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.7.0
    304
    • latest

Version History

Package Sidebar

Install

npm i astro-diagram

Weekly Downloads

305

Version

0.7.0

License

ISC

Unpacked Size

27.1 kB

Total Files

12

Last publish

Collaborators

  • julian.cataldo