Read in about 1.1 minutes
AstroにMarkdown記法でダイアグラムやチャート描画できるようにした
公開日: 2023-11-29 更新日: 2023-12-17
Contents
What is a Mermaid?
ふとした瞬間、不意にフローチャートやシーケンス図、クラス図が書きたくなるときってあるよね？(…え、ない？)
ということで、思い立ってダイアグラムやチャートの作成ができるツール=JSライブラリのMermaidを、このブログ記事を書いているMDXファイル内にMarkdown記法で書けるようにしたので、導入手順を振り返ってみたい。
%%{init: {'theme':'default'}}%%
flowchart TB
A([start]) --> B{true?}
B --Yes--> C[process]
B --No --> D[exception]
C & D --> E([end])
フローチャート図の例
Markdown: チャート図の書き方
flowchart TB
A([start]) --> B{true?}
B --Yes--> C[process]
B --No --> D[exception]
C & D --> E([end])
Astro&MDXへの導入手順
以下のURLの「Quick start」を参考にmdx-mermaidをAstroに導入した。一部ドキュメント通りだとうまく動かなかった部分があったので、その詳細については追記する。
https://github.com/sjwall/mdx-mermaid
後日更新。
%%{init: {'theme':'default'}}%%
classDiagram
note "From Duck till Zebra"
Animal <|-- Duck
note for Duck "can fly
can swim
can dive
can 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()
}
%%{init: {'theme':'default'}}%%
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15