ScrapboxでMermaidを使う
from 学祭Web
2023/08/22頃から、ScrapboxでMermaidの表示が公式に実装された
cf. /arpla/2023/08/22
今まで、「クラス図を作る → 画像化 → 貼り付け」をやっていた人にとって、とても体験が良くなると思う
編集できるメディアとしてのScrapboxの良さ
クラス図などの図も、シームレスに編集できる
UML
クラス図
code:class.mermaid
classDiagram
note "From Duck till Zebra"
Animal <|-- Duck
note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
円グラフ
code:pie.mermaid
pie title キノコ派ですかタケノコ派ですか
"キノコが好き" : 5
"タケノコが好き" : 10
"どっちでもいい" : 85
git graph
code:branch.mermaid
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
めっちゃいいiNoma.icon
少し前に、Scrapboxでクラス図書けたらな~~を思っていた
2023/09/11 深夜
iNoma.iconクラス図について、テキストの表示が死んでる
そんな。、、
他のProjectでも不具合を確認
/villagepump/Scrapboxがmermaid.jsをサポート
どの段階でこけてるんだろう
chart系は生きてるのも不思議だ
2023/09/11 早朝
治してくれた
https://twitter.com/shokai/status/1700955564531163375?s=20
shokaiさんのエゴサ、人力だったんだ
Scrapboxと含むツイートをすると必ずいいねされる