マーメイド#2 エディタと書き方

**ひとりマーメイド2日目**
**エディタと書き方**

## 概要
マーメイドエンジニアのひろきです。こんにちは。
最近流行り（流行らせたい）のマーメイドについて理解を深めていこうと思います。

この記事ではマーメイドのエディタと記述方法について紹介します！

↓↓前回の記事はこちら

https://qiita.com/hirokiwa/items/841fcb749873f2847af7

## マーメイドってどこに書くの？
前回の記事ではマーメイドで記述できる主なダイアグラムを紹介しました。テキストでダイアグラムを作成できるなんて本当に便利ですね。

「ところでマーメイドってどこに書けばいいの？」

結論から言うと、

**\\\大体どこでも書けます！//**

色々紹介するので好きなところで書いてみてください！

## Mermaid Live Editor
マーメイド公式の Live Editor です。
手っ取り早くマーメイドを試したいという方にはこちらをおすすめします。

https://mermaid.live/edit#pako:eNpVj80KwkAMhF8l5KRgX6AHQVv1IijobddDaNPuIvvDdotI23d3ay-aU5j5JkwGrFzNmGMbyCu4l9JCmp0oVNBdNNQ9IMu244kjGGf5PcJ-dXLQKee9tu164fczBMVwnjGGqLR9TotVfPMXyyOU4kw-Ov_4de4vN8JB6KtK5_8dFTiljqKhvKGsogAFhS-CGzQcDOk6VR9mRWJUbFhintaawlOitFPiqI_u9rYV5jH0vMHe1xS51JQ-Nos4fQAxIlOw

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/65250a41-785a-5f7c-74c5-9312ee2756c5.png)

作成したダイアグラムを svg, png で出力することもできます。

こちらは公式エディタなので、最新のダイアグラムにも基本的に対応しています。他のエディタはマーメイドのアップデートに追いついていないことが多い印象です。

## VSCode

VSCode でも記述可能です。使い慣れているエディタは書きやすいですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/16e23129-bc15-b53b-bfef-118b0c655682.png)

[こちら](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)の拡張機能をインストールしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/ab5c78ca-1a2b-cde8-4e80-0fca22820e98.png)

## Notion
筆者はいつも Norion で書いています。個人的には一番便利だと思うのはこれですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/e6aafe55-98fa-953e-b923-792a86ca0ecf.png)

三連グレイブアクセントを入力するとコードエディタが出現します。

```
\```
graph LR
	A([start])-->B{true?}
	B--Yes-->C[process]
	B--No-->D[exception]
	C-->E([end])
	D-->E
```\
```

言語を選択できるので Mermaid を選択してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/abff87b4-b15a-6188-d9f0-5ed4efaf7d9e.png)

これで Notion にマーメイドを記述することができます。

## Qiita
もちろん Qiita でも書けます。

Notion と同様に三連グレイブアクセントを入力して、Mermaid を指定しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/754f817a-b9ec-5050-cca0-3363b066dbef.png)

↓↓このように記述すると、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/5c761e27-d5a2-fc0b-36eb-1cf03a74c6d5.png)

↓↓こうなります。筆者がよくやってるやつですね。

```mermaid
graph TB
	A([start])-->B{true?}
	B--Yes-->C[process]
	B--No-->D[exception]
	C-->E([end])
	D-->E
```
レンダリングさせずにコードをそのまま表示したい場合は Mermaid の前にコロン（:）を付け足します。

↓↓このように記述すると、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/fe2350f5-8ca9-5943-df0e-102087ebcadc.png)

↓↓こうなります。

```:mermaid
graph TB
	A([start])-->B{true?}
	B--Yes-->C[process]
	B--No-->D[exception]
	C-->E([end])
	D-->E
```

## HTMLへの埋め込み
HTMLへの埋め込みも可能です。簡単にwebサイトにダイアグラムを埋め込むことができます。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="BQwZzq" data-user="123unme" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/123unme/pen/BQwZzq">
  mermaid</a> by ABC (<a href="https://codepen.io/123unme">@123unme</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 他にもいろいろ
キリがないので紹介しきれませんが、マーメイドの埋め込みはさまざまな場所で提供されています。もっと知りたい方は [ドキュメント](https://mermaid-js.github.io/mermaid/#/./integrations
) をご覧ください。

## まとめ
マーメイドってどこでも書けるんですねぇ

ぜひお好きなエディタで試してみてください！

↓↓次回の記事はこちら！！

https://qiita.com/hirokiwa/items/fa819db950c89f68269e

## 参考

https://mermaid-js.github.io/mermaid/#/