├── LICENSE ├── plugin └── mermaid │ └── mermaid.js └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Rachael Ludwick 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /plugin/mermaid/mermaid.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | 3 | function fixUpSvgSize(divElem, svgElem) { 4 | var width = svgElem.getAttribute('width'); 5 | var height = svgElem.getAttribute('height'); 6 | var divWidth = divElem.offsetWidth; 7 | var divHeight = divElem.offsetHeight; 8 | 9 | if (width > divWidth || height > divHeight) { 10 | var viewBox = '0 0 ' + width + ' ' + height; 11 | svgElem.setAttribute('viewBox', viewBox); 12 | svgElem.setAttribute('width', divElem.offsetWidth); 13 | svgElem.setAttribute('height', divElem.offsetHeight); 14 | } 15 | } 16 | 17 | function getDataElem(slide) { 18 | var children = slide.getElementsByClassName('diagram-data'); 19 | var spans = Array.prototype.filter.call(children, function(element) { 20 | return element.nodeName === 'SPAN'; 21 | }); 22 | 23 | var diagramSource = slide.getAttribute('data-diagram-source'); 24 | if (diagramSource) { 25 | var diagramSlides = document.getElementsByClassName('diagram-slide'); 26 | 27 | var sourceSlides = Array.prototype.filter.call(diagramSlides, function(slide) { 28 | return slide.getAttribute('data-state') === diagramSource; 29 | }); 30 | 31 | return getDataElem(sourceSlides[0]); 32 | } else { 33 | return spans[0]; 34 | } 35 | } 36 | 37 | function getDisplayDiv(slide) { 38 | var children = slide.getElementsByClassName('diagram-display'); 39 | var divs = Array.prototype.filter.call(children, function(element) { 40 | return element.nodeName === 'DIV'; 41 | }); 42 | 43 | return divs[0]; 44 | } 45 | 46 | function isDiagramSlide(slide) { 47 | return slide.classList.contains("diagram-slide"); 48 | } 49 | 50 | function destroyDiagram(slide) { 51 | if (!isDiagramSlide(slide)) { return; } 52 | 53 | var svgDiv = getDisplayDiv(slide); 54 | while (svgDiv.firstChild) { 55 | svgDiv.removeChild(svgDiv.firstChild); 56 | } 57 | svgDiv.removeAttribute("data-processed"); 58 | } 59 | 60 | function showDiagram(slide) { 61 | if (!isDiagramSlide(slide)) { return; } 62 | 63 | var dataElem = getDataElem(slide); 64 | var svgDiv = getDisplayDiv(slide); 65 | 66 | svgDiv.innerHTML = dataElem.innerHTML; 67 | 68 | mermaid.flowchartConfig 69 | var config = {}; 70 | mermaid.init(config, svgDiv); 71 | 72 | // Fix up svg element size 73 | var svgElem = svgDiv.getElementsByTagName("svg")[0]; 74 | if (svgElem) { 75 | fixUpSvgSize(svgDiv, svgElem); 76 | } 77 | 78 | } 79 | 80 | Reveal.addEventListener( 'slidechanged', function( event ) { 81 | if (event.previousSlide) { 82 | destroyDiagram(event.previousSlide); 83 | } 84 | 85 | if (event.currentSlide) { 86 | showDiagram(event.currentSlide); 87 | } 88 | }); 89 | 90 | }()); 91 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # reveal.js-mermaid-plugin 2 | A very basic [mermaid](https://github.com/knsv/mermaid) plugin for [reveal.js](https://github.com/hakimel/reveal.js) 3 | 4 | ## Project Status 5 | 6 | This project is essentially retired. Feel free to fork and change however you like! 7 | 8 | ## How It Works 9 | 10 | I preferred not to use markdown in my slides. I found just having mermaid tagged classes messed up with the overall presentation in bad ways. So this plugin adds and removes data for mermaid to process on each slide change. So when slides change, it checks the previous slide and destroys any SVG created by mermaid and creates an svg in the current slide (only if tagged as a diagram slide). 11 | 12 | ## Usage 13 | 14 | 1. Copy plugin to your plugin directory (e.g. plugin/mermaid/mermaid.js) and install mermaid js & css (to lib/js & css/ respectively). 15 | 2. Reference mermaid javascript, plugin javascript & mermaid css. Example: 16 | ``` 17 | 18 | 19 | 20 | 21 | 22 | { src: 'plugin/mermaid/mermaid.js' } 23 | ``` 24 | 3. Create diagram in slide. Example: 25 | ``` 26 |
27 | 36 | 37 |
38 |
39 |
40 | ``` 41 | 42 | ### CSS classes & Data attributes 43 | 44 | This plugin uses CSS classes to figure out what to render. 45 | 46 | * "diagram-slide" is used to mark a slide that has a mermaid diagram. Note that you can only have one diagram per slide (it doesn't seem like the audience can really comprehend more than one per slide anyway). This class tagging is used with Reveal's 'slidechanged' event. 47 | * "diagram-data" should tag a span or other element containing the mermaid graph declaration. Note that you probably want to mark that as 'display: none' in your CSS. 48 | * "diagram-display" class should mark an empty div where you want the diagram to appear. 49 | 50 | Note: It's possible diagram-data & diagram-div could be combined but I went thru several iterations of making this work reliably. 51 | 52 | There are a couple data attributes used. 53 | 54 | * The mermaid library itself adds 'data-processed' to the "diagram-div" div after inserting the svg. 55 | * If a slide has the data attribute 'data-diagram-source', then the value will be used to find another slide in the presentation with that value for 'data-state'. The mermaid diagram in that slide will be shown in this slide. 56 | 57 | ### Styling Diagram Nodes 58 | 59 | Mermaid allows you to give a CSS class name to a node (see example above). In your presentation head you can thus setup styles for your diagrams: 60 | 61 | ``` 62 | 63 | 64 | 65 | 66 | 79 | 80 | ``` 81 | 82 | ## Things to Improve 83 | 84 | * Creating a larger diagram seems to be hard. Reveal seems to allocate a fairly small box to the diagram. In my presentation using this, I hacked around this by using CSS: 85 | ``` 86 | .reveal .diagram-display { 87 | padding: 0; 88 | margin: 0; 89 | min-height: 700px; 90 | min-width:100%; 91 | height:auto; 92 | } 93 | ``` 94 | * Alternately, it would be nice to make the dynamically generated SVG nodes as the slide background. I got part way there -- flash of the diagram -- but then it would disappear. I haven't had a chance to debug. 95 | * It would be nice to figure out why just tagging the mermaid graph declaration and letting mermaid javascript handle it doesn't work (it caused the presentation to entirely break for me). 96 | * There's an egregious hack in the javascript regarding SVG resizing (see function fixUpSvgSize). But my knowledge of CSS, Javascript & SVG is such that I don't know how to fix it any better. 97 | --------------------------------------------------------------------------------