【mermaid】mermaidと使用できるエディタについて

目次

• mermaidについて
  • 公式ページの説明(原文)
  • 公式ページの説明(翻訳)
  • 例
• エディタ
  • ブラウザ
  • VSCode
  • Vim

mermaidについて

• 公式ドキュメント

いろいろな種類の図を、テキストで作成することのできるJavascriptで作成されたツールです。

次の文章が公式からのmermaidの説明になります。

公式ページの説明(原文)

Mermaid lets you create diagrams and visualizations using text and code.

It is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

公式ページの説明(翻訳)

Mermaidは、テキストとコードを使ってダイアグラムやビジュアライゼーションを作成することができます。

Javascriptベースのダイアグラム・チャート作成ツールで、Markdownにインスパイアされたテキスト定義をレンダリングし、ダイアグラムを動的に作成・変更することができます。

例

• コード

  

  - 出力

  

エディタ

私が日頃使っているmermaidの記述をサポート(プラグインがある)しているエディタです。

• ブラウザ
• VSCode
• Vim

ブラウザ

mermaid公式がブラウザで図形を描画しながらコードを記述できるウェブページを公開しているので、それを使えば環境に依存せずにmermaidで記述したグラフを表示することができます。

• Mermaid Live Editor

VSCode

VSCodeが一番使いやすいと思います。公式からもサポート用のプラグインが出ているので安心して使えると思います。

• Markdown-All-In-One
• Markdown Preview Mermaid Support

Vim

Vim単体での描画機能は今の所なさそうでした、ブラウザでプレビューを表示する方法として以下のプラグインを使えばできそうです。

• previm