見た目のまま書けるモダンなMarkdownエディタ「Mark Text」が超使いやすい

# 概要
先日Mark TextというOSSのMarkdownエディタを見つけたが、Qiitaに記事がなかったので紹介。

https://marktext.app/

MAC/Windows/Linuxで利用可能。

# 対象読者
- Markdownに興味があるけど、記法を覚えるのが面倒で敬遠してきた人
- ドキュメントはMarkdownで記述して、GitHubなどやツールで差分を見やすくしたい人
- Markdownのエディタ選定で悩んでいる人
- Markdownを愛している人

# 特長
## 見た目のまま記述可能
最大の特徴はMarkdownをそのまま記述できるということ。
Markdown記法を覚えなくてもすぐに書ける。
これまで筆者はMarkdownをVSCodeやAtomで書いてきたのだが、それよりも断然使いやすい。

例えば画像挿入するときは、ドラッグ＆ドロップで可能。Markdownの記法は覚えなくていい。

![Lenna-san.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321047/7ba77ced-23a0-5945-5fef-e254603624c0.png)


例えばQiitaのヘルプにあるような下記の表を挿入するときは、

| Left align       |       Right align |    Center align    |
|:-----------------|------------------:|:------------------:|
| This             |              This |        This        |
| column           |            column |       column       |
| will             |              will |        will        |
| be               |                be |         be         |
| left             |             right |       center       |
| aligned          |           aligned |      aligned       |

下記のようなMarkdownを記載する必要がある。

```
| Left align       |       Right align |    Center align    |
|:-----------------|------------------:|:------------------:|
| This             |              This |        This        |
| column           |            column |       column       |
| will             |              will |        will        |
| be               |                be |         be         |
| left             |             right |       center       |
| aligned          |           aligned |      aligned       |
```

表のフォーマットってどうだっけと悩むことも多いうえ、自分は|の位置とかをスペースで調整したくなる人間なため、意外と上記は編集するのが面倒である。
Mark Textではメニューから表の大きさを指定するだけで作成できる。

![table.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321047/c81e7794-e0f5-a316-4376-587e1c02410e.png)

中央寄せなどした場合はメニューから選択するだけ！タブキーでの移動もできるのでストレスフリー。

![table2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321047/63209fd0-91d9-3650-227c-7d54b0bb17c7.png)

右に列を追加したい場合などもメニューからできてすごく簡単！

![table3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321047/3fd0ef52-1dcd-88c5-25b7-f100d422b497.png)

## フローチャートやシーケンス図の記述が可能
テキストでUML図を記載できるので、変更の際の差分が確認しやすい。
わずらわしい細かな位置調整なども自動でやってくれるので楽。

下記の図がサポートされており、システム開発で使うようなものはだいたいおさえられている。

- フローチャート
- シーケンス図
- クラス図
- ガントチャート
- Gitグラフ
- 棒グラフ
- ヒストグラム
- 散布図
- ...

内部では下記の別プラグインを呼んでいるので、詳細な記法は対応するページを見れば良い。

- flowchart.js
- mermaid.js
- js-sequence
- vega-light.js

### フローチャートの例
例えばフローチャート挿入手順は下記のようになる。
（公式サイトに載っていないのだが）@を入力するとメニューが表示され、そこから挿入する図を選択する。

![marktext_atmark.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321047/f286f26a-9195-5090-4d22-6ab4426f9d10.png)

入力エリアが表示されるので、ここにフローチャートのデータを記載する。

![flowchart.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321047/e2ed5857-2c5e-72e3-cf2a-7753128dac38.png)

今回は[公式ページ](https://flowchart.js.org/)からサンプルを拝借する。データを記載するとリアルタイムで図が変わっていく。

![flowchart2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321047/0c610eb9-00c7-8ed8-fd80-e2bbff0a6f54.png)

ちなみにデータ部分はカーソルアウトすると見えなくなるので、見た目上は図のみが残ることになる。
再度編集したいときは編集ボタンを押せばOK。

### シーケンス図の例
次にシーケンス図を挿入してみる。
@でメニューを表示し、Mermaidを選択。（好みの問題なのでSequence Diagramでも可）

[公式ページ](https://mermaidjs.github.io/#/examples)よりサンプルを拝借すると下記のようになる。

![sequence.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321047/b472d39d-fcb3-7990-20b6-7537c5e986d5.png)


## HTML/PDFへの変換が可能
Markdownエディタをインストールしていない人にMarkdown形式のファイルを渡すと、ただのテキストファイルなので可読性が悪い。
そこで役立つのがHTML/PDF変換機能。

エディタで下記のように書いたものは、ファイル保存と同じ感覚で変換が可能。

![markdown.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321047/8ed14691-d2e7-c635-3e6c-f4c334fee1ba.png)

HTMLは下記のようになる。見た目はMarkdownと変わらない。

![export_html.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321047/adc0995c-11e2-ae33-a1ca-633b88534ea8.png)

PDFは下記のようになる。こちらも見た目は変わらない。
![markdown_pdf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321047/b706a3a8-53dd-c4a0-56d8-6f824d35b7fd.png)

### 他形式に変換する方法
細かい説明は割愛するが、[Pandoc](https://pandoc.org/)を使えば、Wordやパワポ形式などにも変換可能。
自分はWordが好きな人にドキュメントを提出するときはWord形式に変換している。
スタイルの指定もできるので、意外ときれいに変換できる。

## その他
本記事では紹介していないが、下記のようなことも可能である。

- 数式の挿入
- 強調・取り消し線などの文字の装飾
- テーマの変更（自分は黒背景が好み）