Edited at

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

More than 1 year has passed since last update.


やりたいこと

「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」はムリだった。