-
Notifications
You must be signed in to change notification settings - Fork 6
/
Mermaid.js
64 lines (55 loc) · 1.19 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
import React, { useEffect } from "react"
import mermaid from "mermaid"
const DEFAULT_CONFIG = {
startOnLoad: true,
theme: "forest",
logLevel: "fatal",
securityLevel: "strict",
arrowMarkerAbsolute: false,
flowchart: {
htmlLabels: true,
curve: "linear",
},
sequence: {
diagramMarginX: 50,
diagramMarginY: 10,
actorMargin: 50,
width: 150,
height: 65,
boxMargin: 10,
boxTextMargin: 5,
noteMargin: 10,
messageMargin: 35,
mirrorActors: true,
bottomMarginAdj: 1,
useMaxWidth: true,
rightAngles: false,
showSequenceNumbers: false,
},
gantt: {
titleTopMargin: 25,
barHeight: 20,
barGap: 4,
topPadding: 50,
leftPadding: 75,
gridLineStartPadding: 35,
fontSize: 11,
fontFamily: '"Open-Sans", "sans-serif"',
numberSectionStyles: 4,
axisFormat: "%Y-%m-%d",
},
}
const Mermaid = ({ name, chart, config }) => {
// Mermaid initilize its config
mermaid.initialize({...DEFAULT_CONFIG, ...config})
useEffect(() => {
mermaid.contentLoaded()
}, [config])
if (!chart) return null
return (
<div className="mermaid" name={name}>
{chart}
</div>
)
}
export default Mermaid