├── CHANGELOG.md
├── example
    ├── dist
    ├── _sidebar.md
    ├── README.md
    ├── another_page.md
    └── index.html
├── .gitignore
├── screenshot.png
├── src
    ├── index.js
    └── plugin.js
├── package.json
└── README.md


/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/example/dist:
--------------------------------------------------------------------------------
1 | ../dist


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .cache/
2 | dist/
3 | node_modules/
4 | .idea/


--------------------------------------------------------------------------------
/example/_sidebar.md:
--------------------------------------------------------------------------------
1 | * [Home](/)
2 | * [Another Page](/another_page.md)


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Leward/mermaid-docsify/HEAD/screenshot.png


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import plugin from './plugin';
2 | 
3 | if (!window.$docsify) {
4 |     window.$docsify = {}
5 | }
6 | 
7 | const props = window.$docsify.mermaidConfig || { querySelector: ".mermaid" };
8 | 
9 | window.$docsify.plugins = (window.$docsify.plugins || []).concat(plugin(props));


--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
 1 | # Headline
 2 | 
 3 | > An awesome project.
 4 | 
 5 | ### Mermaid
 6 | 
 7 | ```mermaid
 8 | graph LR
 9 |     A --- B
10 |     B-->C[fa:fa-ban forbidden]
11 |     B-->D(fa:fa-spinner);
12 | ```
13 | 
14 | ```mermaid
15 | sequenceDiagram
16 |     participant Alice
17 |     participant Bob
18 |     Alice->>John: Hello John, how are you?
19 |     loop Healthcheck
20 |         John->>John: Fight against hypochondria
21 |     end
22 |     Note right of John: Rational thoughts <br/>prevail!
23 |     John-->>Alice: Great!
24 |     John->>Bob: How about you?
25 |     Bob-->>John: Jolly good!
26 | ```
27 | 


--------------------------------------------------------------------------------
/example/another_page.md:
--------------------------------------------------------------------------------
 1 | # Another Page
 2 | 
 3 | > An another awesome project.
 4 | 
 5 | ### Mermaid
 6 | 
 7 | ```mermaid
 8 | graph LR
 9 |     A --- B
10 |     B-->C[fa:fa-ban forbidden]
11 |     B-->D(fa:fa-spinner);
12 | ```
13 | 
14 | ```mermaid
15 | sequenceDiagram
16 |     participant Alice
17 |     participant Bob
18 |     Alice->>John: Hello John, how are you?
19 |     loop Healthcheck
20 |         John->>John: Fight against hypochondria
21 |     end
22 |     Note right of John: Rational thoughts <br/>prevail!
23 |     John-->>Alice: Great!
24 |     John->>Bob: How about you?
25 |     Bob-->>John: Jolly good!
26 | ```
27 | 


--------------------------------------------------------------------------------
/src/plugin.js:
--------------------------------------------------------------------------------
 1 | const plugin = (mermaidConf) => (hook) => {
 2 | 
 3 |     hook.afterEach((html, next) => {
 4 |         // We load the HTML inside a DOM node to allow for manipulation
 5 |         const htmlElement = document.createElement('div');
 6 |         htmlElement.innerHTML = html;
 7 | 
 8 |         htmlElement.querySelectorAll('pre[data-lang=mermaid]').forEach((element) => {
 9 |             // Create a <div class="mermaid"> to replace the <pre> 
10 |             const replacement = document.createElement('div');
11 |             replacement.textContent = element.textContent;
12 |             replacement.classList.add('mermaid');
13 | 
14 |             // Replace
15 |             element.parentNode.replaceChild(replacement, element);
16 |         });
17 | 
18 |         next(htmlElement.innerHTML);
19 |     });
20 | 
21 |     hook.doneEach(() => mermaid.run(mermaidConf));
22 | 
23 | };
24 | 
25 | export default plugin;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "docsify-mermaid",
 3 |   "version": "2.0.1",
 4 |   "description": "A plugin to render mermaid diagrams in docsify",
 5 |   "browser": "src/index.js",
 6 |   "scripts": {
 7 |     "build": "parcel build src/index.js --out-file docsify-mermaid.js --no-minify",
 8 |     "example": "npm run build && docsify serve example/ --open",
 9 |     "test": "echo 'No test to run'"
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "git+https://github.com/Leward/mermaid-docsify.git"
14 |   },
15 |   "keywords": [
16 |     "docsify",
17 |     "mermaid",
18 |     "diagram"
19 |   ],
20 |   "author": "Paul-Julien Vauthier",
21 |   "license": "ISC",
22 |   "bugs": {
23 |     "url": "https://github.com/Leward/mermaid-docsify/issues"
24 |   },
25 |   "files": [
26 |     "README.md",
27 |     "src/",
28 |     "dist/"
29 |   ],
30 |   "homepage": "https://github.com/Leward/mermaid-docsify#readme",
31 |   "devDependencies": {
32 |     "docsify-cli": "^4.4.0",
33 |     "parcel-bundler": "^1.8.1"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <title>Document</title>
 7 |   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 8 |   <meta name="description" content="Description">
 9 |   <meta name="viewport"
10 |     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
11 |   <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
12 | </head>
13 | 
14 | <body>
15 |   <div id="app"></div>
16 | 
17 |   <script>
18 |     window.$docsify = {
19 |       name: "docsify-mermaid",
20 |       loadSidebar: true,
21 |       mermaidConfig: {
22 |         querySelector: ".mermaid"
23 |       }
24 |     };
25 |   </script>
26 |   <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
27 |   <script type="module">
28 |     import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
29 |     mermaid.initialize({
30 |       startOnLoad: true,
31 |       securityLevel: 'loose',
32 |       logLevel: 1
33 |     });
34 |     window.mermaid = mermaid;
35 |   </script>
36 |   <script src="dist/docsify-mermaid.js"></script>
37 | </body>
38 | 
39 | </html>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [![npm version](https://badge.fury.io/js/docsify-mermaid.svg)](https://www.npmjs.com/package/docsify-mermaid)
 2 | 
 3 | mermaid-docsify is a docsify plugin which allows to render mermaid diagrams in docsify.
 4 | 
 5 | ## How to use
 6 | 
 7 | Add Mermaid and the plugin:
 8 | 
 9 | ```html
10 |   <script type="module">
11 |     import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
12 |     mermaid.initialize({ startOnLoad: true });
13 |     window.mermaid = mermaid;
14 |   </script>
15 |   <script src="//unpkg.com/docsify-mermaid@2.0.1/dist/docsify-mermaid.js"></script>
16 | ```
17 | 
18 | You can optionally customize [mermaid.run](https://mermaid.js.org/config/usage.html#using-mermaid-run) configuration with this props :
19 | 
20 | ```html
21 |   <script>
22 |     window.$docsify = {
23 |       mermaidConfig: {
24 |         querySelector: ".mermaid"
25 |       }
26 |     };
27 |   </script>
28 | ```
29 | 
30 | Now you can include mermaid diagrams in your docsify docs:
31 | 
32 |     ```mermaid
33 |     graph LR
34 |         A --- B
35 |         B-->C[fa:fa-ban forbidden]
36 |         B-->D(fa:fa-spinner);
37 |     ```
38 | 
39 | A demo is available on [Codepen](https://codepen.io/leward/project/editor/AyegJW).
40 | 
41 | ![Docsify with mermaid Screenshot](screenshot.png)
42 | 


--------------------------------------------------------------------------------