Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ひとりマーメイドAdvent Calendar 2022

Day 2

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

Last updated at Posted at 2022-12-02

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

概要

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

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

↓↓前回の記事はこちら

マーメイドってどこに書くの?

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

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

結論から言うと、

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

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

Mermaid Live Editor

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

image.png

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

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

VSCode

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

image.png

こちらの拡張機能をインストールしてください。

image.png

Notion

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

image.png

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

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

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

image.png

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

Qiita

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

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

image.png

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

image.png

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

レンダリングさせずにコードをそのまま表示したい場合は Mermaid の前にコロン(:)を付け足します。

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

image.png

↓↓こうなります。

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

HTMLへの埋め込み

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

他にもいろいろ

キリがないので紹介しきれませんが、マーメイドの埋め込みはさまざまな場所で提供されています。もっと知りたい方は ドキュメント をご覧ください。

まとめ

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

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

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

参考

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Qiita Advent Calendar is held!

Qiita Advent Calendar is an article posting event where you post articles by filling a calendar 🎅

Some calendars come with gifts and some gifts are drawn from all calendars 👀

Please tie the article to your calendar and let's enjoy Christmas together!

4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?