├── mermaidjs ├── test │ ├── run.sh │ ├── reveal-md.json │ ├── lib │ │ └── reveal-mermaid.js │ └── test.md ├── reveal-md.json ├── README.md └── reveal-mermaid.js └── README.md /mermaidjs/test/run.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | reveal-md test.md 4 | -------------------------------------------------------------------------------- /mermaidjs/reveal-md.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": "lib/mermaid.min.js,lib/reveal-mermaid.js" 3 | } 4 | -------------------------------------------------------------------------------- /mermaidjs/test/reveal-md.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": "lib/mermaid.min.js,lib/reveal-mermaid.js" 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # reveal-md-scripts 2 | 3 | Plugins for [reveal-md](https://github.com/webpro/reveal-md). 4 | 5 | -------------------------------------------------------------------------------- /mermaidjs/README.md: -------------------------------------------------------------------------------- 1 | # Mermaid plugin for [reveal-md](https://github.com/webpro/reveal-md). 2 | 3 | ## Installation 4 | 5 | Download mermaid mermaid.min.js or mermaid.js. 6 | Place reveal-mermaid.js and the mermaid js file place it in ./lib directory. 7 | The reveal-md.json file should stay in root directory. 8 | 9 | ## Usage 10 | 11 | Write your mermaid graph into 12 | 13 | ~~~mkdn 14 | ```mermaid 15 | your graph code 16 | ``` 17 | ~~~ 18 | 19 | For example: 20 | 21 | ~~~mkdn 22 | ```mermaid 23 | graph TD; 24 | A-->B; 25 | A-->C; 26 | B-->D; 27 | C-->D; 28 | ``` 29 | ~~~ 30 | 31 | ## Mermaid links 32 | 33 | Mermaid documentation: https://mermaid-js.github.io/mermaid/ 34 | 35 | Mermaid live editor: https://mermaid-js.github.io/mermaid-live-editor/ 36 | 37 | -------------------------------------------------------------------------------- /mermaidjs/reveal-mermaid.js: -------------------------------------------------------------------------------- 1 | mermaid.initialize({ 2 | startOnLoad: false, 3 | theme: 'dark', 4 | logLevel: 3, 5 | }); 6 | 7 | Reveal.addEventListener('ready', event => asyncMermaidRender(event)); 8 | 9 | async function asyncMermaidRender(event) { 10 | var graphs = document.getElementsByClassName("mermaid"); 11 | graphs.forEach((item, index) => { 12 | let graphCode = item.textContent.trim(); //trim() becase of gantt, class and git diagram 13 | let mermaidDiv = document.createElement('div'); 14 | mermaidDiv.classList.add('mermaid'); 15 | mermaidDiv.setAttribute("data-processed", "true"); 16 | 17 | try { 18 | // item.innerText ignores html elements added by revealjs highlight plugin. 19 | mermaid.mermaidAPI.render('theGraph' + index, graphCode, function(svgCode) { 20 | mermaidDiv.innerHTML = svgCode; 21 | }); 22 | 23 | let parentDiv = document.createElement('div'); 24 | parentDiv.appendChild(mermaidDiv); 25 | item.parentNode.parentNode.insertBefore(parentDiv, item.parentNode); 26 | item.parentNode.remove(); 27 | } 28 | catch(err) { 29 | console.log("Cannot render mermaid diagram " + index + "\n" + graphCode); 30 | console.log(err.message); 31 | } 32 | }) 33 | } 34 | -------------------------------------------------------------------------------- /mermaidjs/test/lib/reveal-mermaid.js: -------------------------------------------------------------------------------- 1 | mermaid.initialize({ 2 | startOnLoad: false, 3 | theme: 'dark', 4 | logLevel: 3, 5 | }); 6 | 7 | Reveal.addEventListener('ready', event => asyncMermaidRender(event)); 8 | 9 | async function asyncMermaidRender(event) { 10 | var graphs = document.getElementsByClassName("mermaid"); 11 | graphs.forEach((item, index) => { 12 | let graphCode = item.textContent.trim(); //trim() becase of gantt, class and git diagram 13 | let mermaidDiv = document.createElement('div'); 14 | mermaidDiv.classList.add('mermaid'); 15 | mermaidDiv.setAttribute("data-processed", "true"); 16 | 17 | try { 18 | // item.innerText ignores html elements added by revealjs highlight plugin. 19 | mermaid.mermaidAPI.render('theGraph' + index, graphCode, function(svgCode) { 20 | mermaidDiv.innerHTML = svgCode; 21 | }); 22 | 23 | let parentDiv = document.createElement('div'); 24 | parentDiv.appendChild(mermaidDiv); 25 | item.parentNode.parentNode.insertBefore(parentDiv, item.parentNode); 26 | item.parentNode.remove(); 27 | } 28 | catch(err) { 29 | console.log("Cannot render mermaid diagram " + index + "\n" + graphCode); 30 | console.log(err.message); 31 | } 32 | }) 33 | } 34 | -------------------------------------------------------------------------------- /mermaidjs/test/test.md: -------------------------------------------------------------------------------- 1 | ## Simple Flowchart 2 | 3 | ```mermaid 4 | 5 | graph TD; 6 | A; 7 | 8 | ``` 9 | 10 | --- 11 | 12 | ## Flowchart 13 | 14 | ```mermaid 15 | 16 | graph TD; 17 | A-->B; 18 | A-->C; 19 | B-->D; 20 | C-->D; 21 | 22 | ``` 23 | 24 | --- 25 | 26 | ## Sequence diagram 27 | 28 | ```mermaid 29 | 30 | sequenceDiagram 31 | participant Alice 32 | participant Bob 33 | Alice->>John: Hello John, how are you? 34 | loop Healthcheck 35 | John->>John: Fight against hypochondria 36 | end 37 | Note right of John: Rational thoughts
prevail! 38 | John-->>Alice: Great! 39 | John->>Bob: How about you? 40 | Bob-->>John: Jolly good! 41 | 42 | ``` 43 | 44 | --- 45 | 46 | ## Gantt diagram 47 | 48 | ```mermaid 49 | 50 | gantt 51 | dateFormat YYYY-MM-DD 52 | title Adding GANTT diagram to mermaid 53 | excludes weekdays 2014-01-10 54 | 55 | section A section 56 | Completed task :done, des1, 2014-01-06,2014-01-08 57 | Active task :active, des2, 2014-01-09, 3d 58 | Future task : des3, after des2, 5d 59 | Future task2 : des4, after des3, 5d 60 | 61 | ``` 62 | 63 | --- 64 | 65 | ## Class diagram 66 | 67 | ```mermaid 68 | 69 | classDiagram 70 | Class01 <|-- AveryLongClass : Cool 71 | Class03 *-- Class04 72 | Class05 o-- Class06 73 | Class07 .. Class08 74 | Class09 --> C2 : Where am i? 75 | Class09 --* C3 76 | Class09 --|> Class07 77 | Class07 : equals() 78 | Class07 : Object[] elementData 79 | Class01 : size() 80 | Class01 : int chimp 81 | Class01 : int gorilla 82 | Class08 <--> C2: Cool label 83 | 84 | ``` 85 | 86 | --- 87 | 88 | ## Git graph 89 | 90 | ```mermaid 91 | gitGraph 92 | commit id: "ZERO" 93 | branch develop 94 | commit id:"A" 95 | checkout main 96 | commit id:"ONE" 97 | checkout develop 98 | commit id:"B" 99 | checkout main 100 | commit id:"TWO" 101 | cherry-pick id:"A" 102 | commit id:"THREE" 103 | checkout develop 104 | commit id:"C" 105 | ``` 106 | 107 | --- 108 | 109 | ## Entity Relationship Diagram 110 | 111 | ```mermaid 112 | erDiagram 113 | CUSTOMER ||--o{ ORDER : places 114 | ORDER ||--|{ LINE-ITEM : contains 115 | CUSTOMER }|..|{ DELIVERY-ADDRESS : uses 116 | ``` 117 | 118 | --- 119 | 120 | ## User Journey Diagram 121 | 122 | ```mermaid 123 | journey 124 | title My working day 125 | section Go to work 126 | Make tea: 5: Me 127 | Go upstairs: 3: Me 128 | Do work: 1: Me, Cat 129 | section Go home 130 | Go downstairs: 5: Me 131 | Sit down: 5: Me 132 | ``` 133 | --------------------------------------------------------------------------------