ひとりマーメイド2日目
エディタと書き方
概要
マーメイドエンジニアのひろきです。こんにちは。
最近流行り(流行らせたい)のマーメイドについて理解を深めていこうと思います。
この記事ではマーメイドのエディタと記述方法について紹介します!
↓↓前回の記事はこちら
マーメイドってどこに書くの?
前回の記事ではマーメイドで記述できる主なダイアグラムを紹介しました。テキストでダイアグラムを作成できるなんて本当に便利ですね。
「ところでマーメイドってどこに書けばいいの?」
結論から言うと、
\\大体どこでも書けます!//
色々紹介するので好きなところで書いてみてください!
Mermaid Live Editor
マーメイド公式の Live Editor です。
手っ取り早くマーメイドを試したいという方にはこちらをおすすめします。
作成したダイアグラムを svg, png で出力することもできます。
こちらは公式エディタなので、最新のダイアグラムにも基本的に対応しています。他のエディタはマーメイドのアップデートに追いついていないことが多い印象です。
VSCode
VSCode でも記述可能です。使い慣れているエディタは書きやすいですね。
こちらの拡張機能をインストールしてください。
Notion
筆者はいつも Norion で書いています。個人的には一番便利だと思うのはこれですね。
三連グレイブアクセントを入力するとコードエディタが出現します。
\```
graph LR
A([start])-->B{true?}
B--Yes-->C[process]
B--No-->D[exception]
C-->E([end])
D-->E
```\
言語を選択できるので Mermaid を選択してください。
これで Notion にマーメイドを記述することができます。
Qiita
もちろん Qiita でも書けます。
Notion と同様に三連グレイブアクセントを入力して、Mermaid を指定しましょう。
↓↓このように記述すると、
↓↓こうなります。筆者がよくやってるやつですね。
レンダリングさせずにコードをそのまま表示したい場合は Mermaid の前にコロン(:)を付け足します。
↓↓このように記述すると、
↓↓こうなります。
graph TB
A([start])-->B{true?}
B--Yes-->C[process]
B--No-->D[exception]
C-->E([end])
D-->E
HTMLへの埋め込み
HTMLへの埋め込みも可能です。簡単にwebサイトにダイアグラムを埋め込むことができます。
他にもいろいろ
キリがないので紹介しきれませんが、マーメイドの埋め込みはさまざまな場所で提供されています。もっと知りたい方は ドキュメント をご覧ください。
まとめ
マーメイドってどこでも書けるんですねぇ
ぜひお好きなエディタで試してみてください!
↓↓次回の記事はこちら!!
参考