Markdown
ATOM
Windows10

Atom+markdown-preview-enhancedで図を作成する

やりたいこと

「Atom」と「markdown-preview-enhanced」を使って、テキストエディタ上でシーケンス図やフロー図などを作成したい。

0000.jpg

Atomとは

GitHubが開発したオープンソースのテキストエディタです。
拡張機能がたくさんあり、デザインもオシャレな感じのエディタです。

markdown-preview-enhancedとは

Atomのプラグインです。
Markdown記法で書かれた文章をプレビューすることが出来ます。
数式や図にも対応しています。

インストール

Windows10での手順です。

Atomのインストール

Chocolatey1がインストールされていれば、以下のコマンドでインストールできるはずです。

コマンドプロンプト(管理者)
cinst Atom

Chocolateyを使わずにAtomをインストールする場合は、
Atomからインストーラーをダウンロードし、インストーラーを起動してインストールします。

起動直後の画面
0001.jpg

markdown-preview-enhancedのインストール

  1. Atomを起動します。
  2. 上部のメニューバーから「File」→「Settings」を選択します。
  3. 左ペイン2から「Install」を選択し、検索窓に「markdown-preview-enhanced」と入力し、検索します。
  4. 「markdown-preview-enhanced」の「Install」ボタンを押下するとインストールされます。 0002.jpg

markdown-previewを無効にしておく

AtomにはデフォルトでMarkdownのプラグインがはいっているのですが、ショートカットキーが競合するので無効にしておきます。

  1. 「Settings」画面の、左ペインから「Packages」を選択します。
  2. 検索窓に「markdown-preview」と入力して検索します。
  3. 「markdown-preview」の「Disable」ボタンを押下し、無効化します。 0003.jpg

使い方

シーケンス図の作成

  • 上部のメニューバーから「File」→「New File」を選択し、新規ファイルを作成します。(Ctrl+N)

  • テキストを入力します。
    0004.jpg

## js-sequence-diagrams

```sequence
Title: タイトル
A -> B: メッセージ
Note right of B: メッセージ
A --> B: メッセージ
B ->> A: メッセージ
```

  • メニューバーの「File」→「Sava」を選択します。(Ctrl+S)

  • 拡張子を「.md」などのMarkdownを扱える拡張子3にして保存します。(一度保存しないと、プレビューが表示されません。)
    0005.jpg

  • メニューバーから「Packages」→「markdown preview enhanced」→「Toggle」を選択すると、プレビューが表示されます。(Ctrl+Shift+M)
    0006.jpg

使用できる主なライブラリ

  • 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たのしー!

参考サイト


  1. Chocolateyのインストールと使い方は こちら。 

  2. ペイン(pane)とは:ウィンドウ内の区分けされた領域のこと。響きがかわいい。 

  3. Markdownを扱える拡張子:「.md」や「.markdown」はMarkdownとして認識できた。「.mdown」「.mkdown」「.mkd」「.ron」「.txt」はムリだった。