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

branch develop

commit

checkout main

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と含むツイートをすると必ずいいねされる