Mermaid plugin for Marks

Generation of diagrams and flowcharts from text in a similar manner as markdown. Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code ? This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.

Official website

Marks documentation

Getting Started

# With npm
npm i -S @marks-js/mermaid

# With yarn
yarn add @marks-js/mermaid

Adding it in the code

// Importing and adding it
import { BlockMermaidRenderer } from "@marks-js/mermaid";

const renderer = new MarksRenderer();
renderer.registerRenderers(
  /* ... */
  new BlockMermaidRenderer(),
  /* ... */
  );

  // You can override version manually
const renderer = new MarksRenderer();
renderer.registerRenderers(
  /* ... */
  new BlockMermaidRenderer({ version: "8.8.0" }),
  /* ... */
  );

From CDN for direct use

<!-- Latest version -->
<script src="https://unpkg.com/@marks-js/mermaid/dist/Marks.Mermaid.dist.js"></script>

<!-- Or a specific one-->
<script src="https://unpkg.com/@marks-js/[email protected]/dist/Marks.Mermaid.dist.js"></script>

// Adding it

const renderer = new Marks.MarksRenderer();

const mermaidPlugin = new Marks_Mermaid.BlockMermaidRenderer();
renderer.registerRenderers(
  ...Marks.Plugins.map(_ => new _()),
  mermaidPlugin
);