Have ideas to improve npm?Join in the discussion! »

    scully-plugin-mermaid
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.0 • Public • Published

    scully-plugin-mermaid - The mermaid postRenderer

    npm Dependency Status devDependency Status

    npm PRs Welcome Open Source Love

    Conventional Commits Commitizen friendly semantic-release

    Installation

    To install this library with npm run:

    npm i scully-plugin-mermaid --save-dev

    Usage

    Apply the postRenderer plugin via your Scully config file (scully.<project-name>.config.ts):

    /*
    * The options for mermaid will be passed 1:1
    */
    import { getMermaidPlugin, MermaidPluginName, MermaidPluginConfig } from 'scully-plugin-mermaid';
    
    const mermaidOptions: MermaidPluginConfig = {
      /**
       * OPTIONAL: '.language-mermaid' is also the default, so no need to define this
       */
      selector: '.language-mermaid',
      /**
       * OPTIONAL: Define the wrapper element for the SVG
       * When undefined or set to `true`, a `div` with the class `mermaid-svg` is used by default
       * When set to `false`: No wrapper is used (SVG is added directly)
       * When defined as an object, `tagName` is needed to define the type of the wrapper element (HTML tag)
       */
      wrapper: {
        tagName: 'div', // necessary when object is defined
        classNames: ['wrapper', 'mermaid-svg'], // optional
      },
      /**
       * configuration for the mermaid plugin
       * All params as defined here are valid:
       * https://mermaid-js.github.io/mermaid/getting-started/Setup.html#mermaidapi-configuration-defaults
       */
      config: {
        theme: 'dark',
      }
    };
    const MermaidPlugin = getMermaidPlugin();
    setPluginConfig(MermaidPlugin, mermaidOptions);
    
    export const config: ScullyConfig = {
      projectRoot: './src',
      projectName: 'scully-mermaid',
      outDir: './dist/static',
      routes: {
        '/blog/:slug': {
          type: 'contentFolder',
          postRenderers: [MermaidPluginName], // apply the postRenderer
          slug: {
            folder: './blog',
          },
        },
      },
    };

    By default, you don't need to add any options. The defaults from Mermaid will be used as described in the official docs. You can use any of the described mermaid config parameter.

    Example

    After running the postRenderer it will convert markdown content like the following into SVG graphics:

    ```mermaid
    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: Some note.
    
        Bob-->Alice: Checking with John...
        Alice->John: Yes... John, how are you?
    ```

    The above example will result in a graphic like this one:

    rendered mermaid image example

    The resulting SVG is wrapped into an HTML <div> element with the class mermaid-svg by default. This can be changed to other elements / classes by adjusting the options.

    Install

    npm i scully-plugin-mermaid

    DownloadsWeekly Downloads

    53

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    104 kB

    Total Files

    24

    Last publish

    Collaborators

    • avatar