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

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

![0000.jpg](https://qiita-image-store.s3.amazonaws.com/0/230850/83b9140f-28df-8d6e-326e-71a524a7906c.jpeg)

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

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

# インストール
Windows10での手順です。

## Atomのインストール
Chocolatey[^choco]がインストールされていれば、以下のコマンドでインストールできるはずです。

```:コマンドプロンプト（管理者）
cinst Atom
```

Chocolateyを使わずにAtomをインストールする場合は、
[Atom](https://atom.io)からインストーラーをダウンロードし、インストーラーを起動してインストールします。

起動直後の画面
![0001.jpg](https://qiita-image-store.s3.amazonaws.com/0/230850/a6ca4fdc-654d-4a8e-ff5d-ae819e6ea1db.jpeg)

## markdown-preview-enhancedのインストール
1. Atomを起動します。
1. 上部のメニューバーから「File」→「Settings」を選択します。
1. 左ペイン[^ペイン]から「Install」を選択し、検索窓に「markdown-preview-enhanced」と入力し、検索します。
1. 「markdown-preview-enhanced」の「Install」ボタンを押下するとインストールされます。
![0002.jpg](https://qiita-image-store.s3.amazonaws.com/0/230850/e7d67199-597a-13c3-e887-b044acf861b6.jpeg)

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

1. 「Settings」画面の、左ペインから「Packages」を選択します。
1. 検索窓に「markdown-preview」と入力して検索します。
1. 「markdown-preview」の「Disable」ボタンを押下し、無効化します。
![0003.jpg](https://qiita-image-store.s3.amazonaws.com/0/230850/ffab47a5-a274-ca50-76d6-068843078517.jpeg)

# 使い方
## シーケンス図の作成
* 上部のメニューバーから「File」→「New File」を選択し、新規ファイルを作成します。（Ctrl＋N）

* テキストを入力します。
  ![0004.jpg](https://qiita-image-store.s3.amazonaws.com/0/230850/51c4304d-5c7c-9dfd-5e44-093323f5650b.jpeg)

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

* メニューバーの「File」→「Sava」を選択します。（Ctrl＋S）

* 拡張子を「.md」などのMarkdownを扱える拡張子[^Markdownを扱える拡張子]にして保存します。（一度保存しないと、プレビューが表示されません。）
  ![0005.jpg](https://qiita-image-store.s3.amazonaws.com/0/230850/d674c118-c244-005d-394b-20e9aa3722fe.jpeg)

* メニューバーから「Packages」→「markdown preview enhanced」→「Toggle」を選択すると、プレビューが表示されます。（Ctrl＋Shift＋M）
  ![0006.jpg](https://qiita-image-store.s3.amazonaws.com/0/230850/abcfb871-fc96-05ba-ed59-79eb94f2625d.jpeg)

## 使用できる主なライブラリ
* [flowchart.js](http://flowchart.js.org/)：フロー図が作成できます。
* [js-sequence-diagrams](https://bramp.github.io/js-sequence-diagrams/)：シーケンス図が作成できます。
* [mermaid](https://mermaidjs.github.io/)：フロー図、シーケンス図、ガントチャートが作成できます。

markdown-preview-enhancedで作成できる図の詳細は[こちら](https://shd101wyy.github.io/markdown-preview-enhanced/#/diagrams)を参照してください。

その他数式の表示にも対応しています。

$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](http://plantuml.com/)というライブラリも使用できます。
こちらはJavaとGraphVizが必要なので、インストールされていなければ、別途インストールする必要があります。

Chocolateyなら以下でインストールできます。

```:コマンドプロンプト（管理者）
cinst jdk8
```

```:コマンドプロンプト（管理者）
cinst graphviz
```

PlantUMLなら[こんなことも](https://qiita.com/Tachy_Pochy/items/752ef6e3d38e970378f0)できるらしい。すごい。


# あとがき
Markdownたのしー！

# 参考サイト
* [Atom](https://atom.io)
* [markdown-preview-enhanced](https://atom.io/packages/markdown-preview-enhanced)
* [flowchart.js](http://flowchart.js.org/)
* [js-sequence-diagrams](https://bramp.github.io/js-sequence-diagrams/)
* [mermaid](https://mermaidjs.github.io/)
* [PlantUML](http://plantuml.com/)
* [【ドキュメントが書きたくなる】Markdownライブプレビュー + インライン数式/UML/図表 + 綺麗にPDF/Wordエクスポートまで](https://qiita.com/tomo_makes/items/da4e8fe7d8cf168b545f)
* [Markdownテキストでシーケンス図とフローチャートを描く](https://qiita.com/ka215/items/a709665cb34c505ccf1f)
* [PlantUML で ER 図（ERD）を描く](https://qiita.com/Tachy_Pochy/items/752ef6e3d38e970378f0)



[^choco]: Chocolateyのインストールと使い方は [こちら。](https://qiita.com/fuk101/items/f5245b741e236cc9c13f)
[^ペイン]: ペイン（pane）とは：ウィンドウ内の区分けされた領域のこと。響きがかわいい。
[^Markdownを扱える拡張子]: Markdownを扱える拡張子：「.md」や「.markdown」はMarkdownとして認識できた。「.mdown」「.mkdown」「.mkd」「.ron」「.txt」はムリだった。