2017-11-21 22:12:04 -05:00
|
|
|
// Renders diagrams and flowcharts from text using Mermaid in any element with the
|
|
|
|
// `js-render-mermaid` class.
|
|
|
|
//
|
|
|
|
// Example markup:
|
|
|
|
//
|
|
|
|
// <pre class="js-render-mermaid">
|
|
|
|
// graph TD;
|
|
|
|
// A-- > B;
|
|
|
|
// A-- > C;
|
|
|
|
// B-- > D;
|
|
|
|
// C-- > D;
|
|
|
|
// </pre>
|
|
|
|
//
|
|
|
|
|
|
|
|
import Flash from './flash';
|
|
|
|
|
2017-11-22 13:40:11 -05:00
|
|
|
export default function renderMermaid($els) {
|
|
|
|
if (!$els.length) return;
|
2017-11-21 22:12:04 -05:00
|
|
|
|
|
|
|
import(/* webpackChunkName: 'mermaid' */ 'blackst0ne-mermaid').then((mermaid) => {
|
|
|
|
mermaid.initialize({
|
|
|
|
loadOnStart: false,
|
|
|
|
theme: 'neutral',
|
|
|
|
});
|
|
|
|
|
2017-11-22 13:40:11 -05:00
|
|
|
$els.each((i, el) => {
|
|
|
|
mermaid.init(undefined, el);
|
|
|
|
});
|
2017-11-21 22:12:04 -05:00
|
|
|
}).catch((err) => {
|
|
|
|
Flash(`Can't load mermaid module: ${err}`);
|
|
|
|
});
|
2017-11-22 13:40:11 -05:00
|
|
|
}
|