# @liradb2000/markdown-it-mermaid

> Forked Package markdown-it-mermaid (Newely).

Latest version **0.4.4** (published 2021-09-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @liradb2000/markdown-it-mermaid
pnpm add @liradb2000/markdown-it-mermaid
yarn add @liradb2000/markdown-it-mermaid
bun add @liradb2000/markdown-it-mermaid
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.4 |
| Published | 2021-09-28 |
| First published | 2019-04-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 27.2 KB |
| Known vulnerabilities | 0 (+9 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 21 |
| Author | DB KIM |
| Maintainers | liradb2000 |
| Keywords | markdown-it-plugin, markdown-it, markdown, mermaid, flowchart, sequence |

## Links

- npm: https://www.npmjs.com/package/@liradb2000/markdown-it-mermaid
- Repository: https://github.com/liradb2000/markdown-it-mermaid
- Homepage: https://github.com/liradb2000/markdown-it-mermaid#readme
- Issues: https://github.com/liradb2000/markdown-it-mermaid/issues
- npm.io page: https://npm.io/package/@liradb2000/markdown-it-mermaid

## Dependencies (2)

- [npm](https://npm.io/package/npm.md) ^7.24.1
- [mermaid](https://npm.io/package/mermaid.md) ^8.13.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.4.4 (latest) — 2021-09-28
- 0.4.3 — 2021-06-07
- 0.4.2 — 2021-01-07
- 0.4.1 — 2020-07-15
- 0.4.0 — 2020-07-15
- 0.3.7 — 2019-10-28
- 0.3.6 — 2019-07-08
- 0.3.5 — 2019-07-08
- 0.3.4 — 2019-07-03
- 0.3.3 — 2019-05-29
- 0.3.2 — 2019-04-09
- 0.3.1 — 2019-04-09
- 0.3.0 — 2019-04-08

## README

Mermaid plugin for markdown-it.(Forked)

## 0.4.4
-   Update [Mermaid-js](https://mermaid-js.github.io/mermaid/#/) 8.13.0

## Installation

```
npm install @liradb2000/markdown-it-mermaid
```

## Usage

```js
import markdownIt from "markdown-it";
import markdownItMermaid from "@liradb2000/markdown-it-mermaid";
const mdi = markdownIt();
mdi.use(markdownItMermaid);
mdi.render(`~~~mermaid
  graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]
~~~`);
```

The word `mermaid` after the fence code block opening indicates that the
rest of the fenced block should be passed to mermaid for processing.
This example used the `~~~` fence marker since the multi-line string
in javascript is the same character,
but either `~~~` or ` ``` ` works.

## Customize mermaid

```js
import MarkdownIt from 'markdown-it';
import MarkdownItKatex from '@liradb2000/markdown-it-mermaid';

var md = MarkdownIt({
        html: false,
        linkify: true,
        typographer: true,
        breaks: true,
        xhtmlOut: false,
    });

md.use(MarkdownItMermaid,{
  startOnLoad: false,
  securityLevel: true,
  theme: "default",
  flowchart:{
    htmlLabels: false,
    useMaxWidth: true,
  },
  dictionary:{
    token: "mermaid",
    graph:"graph",
    sequenceDiagram: "sequenceDiagram",
  }
  ...or any options
})
```

### Dictionary option (New ver. 0.4.3)

````
```mermaid (<- token)
graph TD (<- Replacable)
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]
```
````

-   Example  
If you setup like below,
```javascript
md.use(MarkdownItMermaid,{
  ...,
  dictionary:{
    token: "diagram",
    gra:"graph",
    seq:"sequenceDiagram",
    seqDiagram: "sequenceDiagram",
  }
  ...or any options
})
```

you can use like
````
```diagram
gra TD 
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]
```

or

```diagram
seq
    participant John
    participant Alice
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
```

or

```diagram
seqDiagram
    participant John
    participant Alice
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
```

````

## ✔Migrate v0.3.x to v0.4.x

Change the token (like grpah TD, sequenceDiagram or something) to "mermaid"!

```js
- mdi.render(`\`\`\`graph TD
+ mdi.render(`\`\`\`mermaid
+  graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]
\`\`\``);
```

## Alternative packages

-   https://github.com/DatatracCorporation/markdown-it-mermaid
    -   (Recommend) Supports title and more rich funcs!

## Thanks to

@DatatracCorporation
@nojaja

---
_Source: https://npm.io/package/@liradb2000/markdown-it-mermaid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._