やりたいこと
「Atom」と「markdown-preview-enhanced」を使って、テキストエディタ上でシーケンス図やフロー図などを作成したい。
Atomとは
GitHubが開発したオープンソースのテキストエディタです。
拡張機能がたくさんあり、デザインもオシャレな感じのエディタです。
markdown-preview-enhancedとは
Atomのプラグインです。
Markdown記法で書かれた文章をプレビューすることが出来ます。
数式や図にも対応しています。
インストール
Windows10での手順です。
Atomのインストール
Chocolatey1がインストールされていれば、以下のコマンドでインストールできるはずです。
cinst Atom
Chocolateyを使わずにAtomをインストールする場合は、
Atomからインストーラーをダウンロードし、インストーラーを起動してインストールします。
起動直後の画面
markdown-preview-enhancedのインストール
- Atomを起動します。
- 上部のメニューバーから「File」→「Settings」を選択します。
- 左ペイン2から「Install」を選択し、検索窓に「markdown-preview-enhanced」と入力し、検索します。
- 「markdown-preview-enhanced」の「Install」ボタンを押下するとインストールされます。
markdown-previewを無効にしておく
AtomにはデフォルトでMarkdownのプラグインがはいっているのですが、ショートカットキーが競合するので無効にしておきます。
- 「Settings」画面の、左ペインから「Packages」を選択します。
- 検索窓に「markdown-preview」と入力して検索します。
- 「markdown-preview」の「Disable」ボタンを押下し、無効化します。
使い方
シーケンス図の作成
-
上部のメニューバーから「File」→「New File」を選択し、新規ファイルを作成します。（Ctrl＋N）
-
テキストを入力します。
## js-sequence-diagrams
```sequence
Title: タイトル
A -> B: メッセージ
Note right of B: メッセージ
A --> B: メッセージ
B ->> A: メッセージ
``` -
メニューバーの「File」→「Sava」を選択します。（Ctrl＋S）
-
拡張子を「.md」などのMarkdownを扱える拡張子3にして保存します。（一度保存しないと、プレビューが表示されません。）
-
メニューバーから「Packages」→「markdown preview enhanced」→「Toggle」を選択すると、プレビューが表示されます。（Ctrl＋Shift＋M）
使用できる主なライブラリ
- flowchart.js：フロー図が作成できます。
- js-sequence-diagrams：シーケンス図が作成できます。
- mermaid：フロー図、シーケンス図、ガントチャートが作成できます。
markdown-preview-enhancedで作成できる図の詳細はこちらを参照してください。
その他数式の表示にも対応しています。
$f(x) = \int_{-\infty}^\infty\hat f(\xi),e^{2 \pi i \xi x},d\xi$
$f(x) = \int_{-\infty}^\infty\hat f(\xi),e^{2 \pi i \xi x},d\xi$
さらに高度な図を使いたい場合
PlantUML
PlantUMLというライブラリも使用できます。
こちらはJavaとGraphVizが必要なので、インストールされていなければ、別途インストールする必要があります。
Chocolateyなら以下でインストールできます。
cinst jdk8
cinst graphviz
PlantUMLならこんなこともできるらしい。すごい。
あとがき
Markdownたのしー！
参考サイト
- Atom
- markdown-preview-enhanced
- flowchart.js
- js-sequence-diagrams
- mermaid
- PlantUML
- 【ドキュメントが書きたくなる】Markdownライブプレビュー + インライン数式/UML/図表 + 綺麗にPDF/Wordエクスポートまで
- Markdownテキストでシーケンス図とフローチャートを描く
- PlantUML で ER 図（ERD）を描く