Neverending Pun Machine

    astro-diagram

    0.6.3 • 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

    Install

    npm i astro-diagram

    DownloadsWeekly Downloads

    34

    Version

    0.6.3

    License

    ISC

    Unpacked Size

    26.7 kB

    Total Files

    12

    Last publish

    Collaborators

    • julian.cataldo