-
-
Notifications
You must be signed in to change notification settings - Fork 942
/
Mermaid.js
73 lines (65 loc) · 1.63 KB
/
Mermaid.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
// according to https://github.com/facebook/docusaurus/issues/1258#issuecomment-594393744
// use in *.mdx like:
// import Mermaid from '@theme/Mermaid'
//
// <Mermaid chart={`
// flowchart TD
// cr([Create Request]) --> backoffice[Backoffice Server REST]
// `}/>
import React, { useEffect, useState } from 'react'
import mermaid from 'mermaid'
import styles from './mermaid.module.css'
import cn from 'classnames'
mermaid.initialize({
startOnLoad: true,
logLevel: 'fatal',
securityLevel: 'strict',
arrowMarkerAbsolute: false,
theme: 'neutral',
flowchart: {
useMaxWidth: true,
htmlLabels: true,
rankSpacing: 65,
nodeSpacing: 30,
curve: 'basis'
},
sequence: {
useMaxWidth: true
},
gantt: {
useMaxWidth: true
}
})
const Mermaid = ({ chart }) => {
const [zoomed, setZoomed] = useState(false)
const [svg, setSvg] = useState(undefined)
const [id] = useState(`mermaid-${Math.random().toString(36).substr(2, -1)}`)
const toggle = () => setZoomed(!zoomed)
useEffect(() => {
mermaid.render(id, chart, (svg) => {
setSvg(svg)
})
}, [])
return (
<>
<div
onClick={toggle}
className={cn(styles.graph, styles.pointer)}
dangerouslySetInnerHTML={{ __html: svg }}
/>
<div
onClick={toggle}
className={cn(styles.overlay, styles.pointer, styles.graph, {
[styles.visible]: zoomed
})}
>
<div
onClick={(e) => e.stopPropagation()}
className={cn(styles.backdrop, styles.graph)}
dangerouslySetInnerHTML={{ __html: svg }}
/>
</div>
</>
)
}
export default Mermaid