専用エディタTyporaでは、ダイアグラム（チャート／図）を作ることができます。
もちろんドロー機能のような描画ツールを使うわけではなく、あくまでテキストを使って記述します。
ソフトウェアエンジニアの方はいろんなライブラリをご存じでしょうが、私はまったくシロウトなので少し勉強してみました。
間違い、不適切な記述などあったらご指摘いただけると助かります。
この記事の目次
テキスト入力だけで図が描ける！
文章のほかに図を添えて説明するばあい、ふつうVisioのようなドロー系の画像編集ソフトを使うと思います。
当然、ドキュメントを作るソフトとは別にグラフィックソフトを用意しなければいけないのでちょっとめんどうです。
そこで、テキストを書き込むだけで図を作ってくれる仕組みが考えられました。
いろんな仕組みがあるようですが、ここではそれらを総称してチャート作成ライブラリと呼んでおきます。
ライブラリとは、カンタンにいうとソフトウェアやWebサイトに組み込んで使用する共有パーツみたいなものです。
たとえばWebページを記述するHTMLファイルの中に、まずライブラリを読み込むように命令を書いておきます。
そして、HTMLのコンテンツの中にチャート作成用のコード（命令）を書いておくと、そのWebページを実際に読み込んだときに、コードの部分が自動的にチャートになって表示されます。
Typoraのばあいは標準で3つのライブラリをサポートしているので、それぞれのライブラリの書き方にそってコードを書けば、すぐにダイアグラム（チャート）ができあがります。
昔はワープロやテキストエディタでも文字罫線を使って図を描いていましたが、それよりはるかに洗練されています。
チャートのサンプルを見てみよう
具体的にどんな図が描けるのか、サンプルを見てみましょう。
といっても私もまだちんぷんかんぷんなので、Typoraのドキュメントにあった例からふたつ紹介します。すべてのサンプルはTyporaのサポートページで紹介されているのでぜひそちらも見てください。
シーケンスの例
シーケンスと呼ばれる、処理の流れ（応答）を表した図です。
ここではAliceとBobの対話になっています。
Typoraで描いたシーケンス図の例
このチャートは実際には次のようなテキストで書かれています。
Alice->Bob: Hello Bob, how are you? Note right of Bob: Bob thinks Bob-->Alice: I am good thanks!`
1行めはAliceからBobへのあいさつ、3行めはBobからAliceへの返答です。
その間の2行めに書かれているのは、Aliceからのあいさつを受けてBobが行った処理です。
このように2人の名前や行動を書くだけでブロックや矢印を描いて図にしてくれます。
パイチャートの例
おなじみパイチャート（円グラフ）もカンタンに描けます。
Typoraで描いた円グラフの例
このパイチャートのソースコードはたったこれだけです。
pie
title Pie Chart
"Dogs" : 386
"Cats" : 85
"Rats" : 150
円を描く命令も色分けも指定していません。
簡単なチャートを描いてみる
こんどは実際に簡単なフロー図を描いてみましょう。
ダイアグラムのブロックを作る
Typoraでダイアグラムを描くには、まずダイアグラムの領域を示すブロックを作ります。
Webページの作成にたとえるとdiv要素でブロックを作るようなものと思ってください。
まず、バッククォートを3つ入力し、続いてmermaidとタイプします。
ダイアグラムのブロックを作る
mermaidというのはライブラリの名前です。
「これからmermaidというライブラリを使って図を書くよ」という合図。
ほかのライブラリを使うときは、そのライブラリの名前になります。
続いて【Enter】キーを押すと次の図のようにふたつのブロックが現れます。
コードとダイアグラムのブロックが現れる
上の薄いグレーの領域がコードのテキストを書き込むところ。下のほうの枠線内に「空のダイアグラム」と書かれているところが、実際に図が現れるエリアです。
ダイアグラムブロックの右上に[Mermaid]という表示があって、このブロックはMermaidを使うように指定されているのがわかります。
ほんとうはmermaidブロックの終わりを表すタグがあるんですが、これは自動的に書き込まれるのでふだんは気にしなくてもだいじょうぶ。
サンプルコードをペーストしてみる
フロー図を描く前にちょっと寄り道します。
上のコードエリアに、パイチャートのコードを入力してみましょう。
コードエリア内をクリックして、サンプルページからコピーしてきたパイチャートのコードをペーストします。
これだけでチャートができあがります。
パイチャート用コードをペーストしたところ
ここで、サンプルページのコードと見比べてみましょう。
赤枠内だけをペーストすればいい
先頭行はバッククォートが3つ並んだあと"mermaid"と書かれているので、先ほど手作業で入力したのと同じですね。
最終行はバッククォート3つですから、ここがダイアグラムブロックの終わりだとすぐにわかります。
つまりその間の5行分だけコピー＆ペーストすればチャートができあがるわけです。
フローを描いてみる
パイチャートのコード部分をすべて選択して削除したら、コードを書いてみます。
フロー図の記述例
"graph"というのがmermaidでブロック図を描く命令。"TD"というのは上から下へつなぐ指示です。「トップ トゥ ダウン」ということでしょう。
"start"と"stop"を-->でつなぐと矢印で結ばれます。
"TD"のところを”LR”に書き換えると左から右へ流れる図になります。「レフト トゥ ライト」ですね。
横並びの図に書き換える
”Start"と”Stop"を書き換えて山手線の駅名を順に書いてみました。
山手線の駅名に書き換える
"田町"の次を"東京"にしたらループでつないでくれました。
ループさせることもできる。
このようにカンタンに図を描けます。
ダイアグラムブロック以外のところをクリックすると、コード編集エリアが隠れてチャートだけが表示されます。
コード部分は非表示になる。
もういちどコードを編集するときはダイアグラム上をクリックするだけです。
Typoraで使えるライブラリ
Typoraでは次の3つのチャート作成ライブラリをサポートしています（2019年12月現在）。
それぞれのライブラリの詳しい記述方法についてはリンク先で確認してください。
3つのライブラリをサポート。
このうちSequenceとFlowchartは、それぞれシーケンス図とフローチャートを描くための専用ライブラリのようです。それに対してMermaidはサンプルでも紹介した、パイチャートや工程管理でおなじみのガントチャートなど6種類の図を作れます。
Mermaidでもフローチャートの作成が可能ですが、分岐の表現など一部が特殊でなじみにくい部分があるので、一般的なフローチャートを描くならFlowchart.jsを使った方がよさそうです。
Webサイトではそのまま使えない
このようにTypraではライブラリとの連携でかんたんに図を描けるんですが、実際に利用するには、クリアしないといけない問題がひとつあります。
というのも私のようなブロガーの場合、Typoraで書いた記事は最終的にWebで公開するのが目的です。
ところが、記事をそのままブログ（当サイトの場合はWordPress）の編集画面にペーストしても、チャートは表示されません。
なぜかというと、サイト自体（HTMLファイルあるいはWordPressのテンプレート）が、チャート作成ライブラリを使うように設定されていないからです。
ライブラリを読み込ませる方法自体はそれほど難しくないと思いますが、私の場合WordPressのカスタマイズにまだ不慣れなので、今回はそこまでご紹介できません。
WordPressのほうをもう少し勉強してから紹介させていただきたいと思いますので、今回はご容赦ください。
マークダウン感覚の手軽さが魅力
今回はTyporaでカンタンに図を描けるところを見ていただきました。
Typoraの場合、ライブラリを直接サポートしているので、特にインストールや設定の必要もなくすぐに図を作れます。こういった準備がいらず、純粋に図の描き方だけ覚えればいいので敷居が少し低くなっているのは嬉しいポイントです。
おまけに、テキストで記述したものがその場でダイアグラムになります。
ダイアグラムを記述するコードそのものは他のテキストエディタでも書けます。
でも、できあがったダイアグラムをチェックして修正するとなると、ライブラリ対応のビューアーを備えたエディタを用意するといった手間が必要だと思われます（この点、まだ詳しくないので間違っているかもしれませんが）。
それに比べるとTyporaは本当にカンタンです。現に、ライブラリを初めて触ったその当日に、こうして記事を書いているくらいですから（即席でごめんなさい）。
最後に、特にWebページの作成を想定したばあいにチャート作成ライブラリを使うメリット／デメリットをま整理しておきましょう。
ライブラリでチャートを作る利点
-
グラフィックソフトが不要、エディタ上で作成できる
-
画像に比べてファイルサイズが小さい
-
読み込みが速く、SEO的にも有利
-
修正もエディタ上でカンタンにできる
ライブラリでチャートを作るデメリット
-
-
複雑な図の作成や装飾ができない
-
ライブラリを使用するための設定が必要（HTML／テンプレート）
まとめると、シンプルな図をすばやく描きたいときはチャート作成ライブラリ、複雑な図を作るときはグラフィックソフト、と役割分担するのがお薦めのようです。