0
0

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.

mermaid.jsで作図しよう

Posted at

mermaid.jsって??

公式ドキュメントはこちらです
「Javascriptベースのダイアグラム作成およびチャート作成ツール」です。コードで図を作成することができます!2020/11/27現在ではフローチャート、シーケンス図、ガントチャート、クラス図、ユーザージャーニーダイアグラムなどをサポートしています。詳しい記載方法は公式ドキュメントか自分がまとめた別記事をご覧いただければ幸いです。

「Mermaid Live Editor」というブラウザ上でmermaid.jsの記載とプレビュー、出力を行う事のできるサービスを利用します。まずはこちらにアクセスしてみてください。 ↓

下記のようなページが開くと思います。

Online_FlowChart___Diagrams_Editor_-_Mermaid_Live_Editor_と_TODO.png

初期段階でフローチャートが記載されています(クリスマスに買い物をするというフローチャートです。なんだかワクワクしますよね。)見ればわかると思いますが「Code」の部分のコードを記載して結果が「Preview」表示されます。

試しに下記の内容を「Code」に記載してみましょう。

graph LR
  A[起床] --> B[朝食]
  B --> C[作業]
  C --> D[昼食]
  D --> E[作業]
  E --> F[夕飯]
  F --> G[就寝]
  G --> A

下記のようにプレビューに下記の図が表示されていると思います。

Online_FlowChart___Diagrams_Editor_-_Mermaid_Live_Editor_と_TODO.png

表示されている図を画像ファイルとしてダウンロードしてみましょう。「Actions」にある「PNG」ボタンをクリックすることで図形を画像ファイルでダウンロードすることができます。

Online_FlowChart___Diagrams_Editor_-_Mermaid_Live_Editor_と_TODO.png

ダウンロードする形式もpngとsvgで選べたり、図を表示するためのリンクを作成することもできます。

Online_FlowChart___Diagrams_Editor_-_Mermaid_Live_Editor_と_TODO.png

最近だとQiitaもmermaidの作図に対応したりとこれからも盛り上がりそうで嬉しいです!

ちなみに下記のように記載することでQiitaの記事でも作図が可能です!

uploading...0

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?