更新情報
2023年5月14日： mermaid.min.js のダウンロード元のリンクがきれていいたため、URLを更新
2023年5月14日： Git graph の記述方法が変更となっていたため、変更
概要
Databricksにて、mermaid.jsのダイアグラムを作成が可能であったため検証結果を共有します。Databricksノートブック内に、mermaid.jsのダイアグラムを残すことで、コードと一緒に設計書を残すことができるため便利です。
displayHTML関数、もしくは、%md-sandboxにより表示可能であり、設計書として残す際には%md-sandboxを利用した方がよさそうです。displayHTML関数で残す場合には、ノートブックが実行されるたびに再生成する処理されるためです。
mermaid.jsとは
mermaid.jsとは、javascriptベースで開発されており、コードからダイアグラムを作成するツールです。
引用元：About Mermaid (mermaid-js.github.io)
コードからきれいなダイヤグラムを作成できることもあり、設計書として使われることがあるようです。
引用元：Online FlowChart & Diagrams Editor - Mermaid Live Editor (mermaid-js.github.io)
基本的な検証
displayHTML関数で表示する方法
displayHTML("""
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
</head>
<body>
<div class="mermaid">
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
</div>
</body>
</html>
""")
%md-sandboxで表示する方法
%md-sandbox
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/mermaid/dist/mermaid.min.css">
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
</head>
<body>
<div class="mermaid">
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
</div>
</body>
</html>
memeidのダイアグラム別検証
下記の関数を作成して検証しました。
def mermeaid_display(code):
mermeid_html =f"""
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({{startOnLoad:true}});</script>
</head>
<body>
<div class="mermaid">
{code}
</div>
</body>
</html>
"""
displayHTML(mermeid_html)
code = """
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
"""
mermeaid_display(code)
Flowcharts
mermaid_code = """
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
"""
mermeaid_display(mermaid_code)
Sequence diagrams
mermaid_code = """
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
"""
mermeaid_display(mermaid_code)
Class diagrams
mermaid_code = """
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
"""
mermeaid_display(mermaid_code)
Entity Relationship Diagrams
mermaid_code = """
erDiagram
CUSTOMER ||--o{ ORDER : places
CUSTOMER {
string name
string custNumber
string sector
}
ORDER ||--|{ LINE-ITEM : contains
ORDER {
int orderNumber
string deliveryAddress
}
LINE-ITEM {
string productCode
int quantity
float pricePerUnit
}
"""
mermeaid_display(mermaid_code)
User Journey Diagram
mermaid_code = """
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
"""
mermeaid_display(mermaid_code)
Gantt diagrams
mermaid_code = """
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
"""
mermeaid_display(mermaid_code)
Pie chart diagrams
mermaid_code = """
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
"""
mermeaid_display(mermaid_code)
Requirement Diagram
mermaid_code = """
requirementDiagram
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
element test_entity {
type: simulation
}
test_entity - satisfies -> test_req
"""
mermeaid_display(mermaid_code)
Git graph
mermaid_code = """
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
"""
mermeaid_display(mermaid_code)
