Novice Prime Minister

    @julian_cataldo/astro-diagram

    0.12.3 • Public • Published

    🚀  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 @julian_cataldo/astro-diagram mermaid

    🛠  Usage

    ---
    import Diagram, { Config } from '@julian_cataldo/astro-diagram/Diagram.astro';
    
    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 MDX

    Warning
    This is still a work-in-progress.
    Some rendering bugs and inconsistencies remain.

    In your astro.config.mjs:

    import mdxMermaidPlugin from '@julian_cataldo/astro-diagram';
    // ...
    
    export default defineConfig({
      // ...
      integrations: [
        mdx({ remarkPlugins: { extends: [mdxMermaidPlugin] } }),
        // ...
      ],
      // ...
    });

    Then, in your MDX, 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 @julian_cataldo/astro-diagram

    DownloadsWeekly Downloads

    63

    Version

    0.12.3

    License

    ISC

    Unpacked Size

    2.43 MB

    Total Files

    41

    Last publish

    Collaborators

    • julian.cataldo