stackedit 5でFlowchartを書くことが出来ない

前書き

Markdownのeditorとして、stackeditという、オンラインのEditorがあると知ったのは、恥ずかしながら、つい最近の事です。
そもそも、Markdown形式自体、何となくは知っていたのですが、マトモに勉強を始めて、使い始めたのは、やっぱりつい最近の事です。

その為、stackeditについても、Markdownについても、殆ど知識は無い状態です。

Qiitaで掲載されている、他の方の記事を見て、Markdown記法について勉強していたのですが、「stackedit」を使うと、フローチャートが書ける、という記事を見たので、これは便利だと思って、早速使ってみる事にしました。

ところが、色々な記事を参照して、stackeditでフローチャートを書こうとしたのですが、全く書くことが出来ません。
原因を調べてみた結果、stackeditのversionに起因する問題らしい、という事が解りました。

Qiitaを調べた限り、この問題に関する記事は無さそうだったので、自分で書いてみようと思った次第です。

あれ、書けない…

Qiitaで掲載されている、他の方の記事を見ながら、フローチャートを書いてみる事にしました。

※下記コードは、stackeditのwelcome documentからの引用です。

```flow
st=>start: Start
e=>end
op=>operation: My Operation
cond=>condition: Yes or No?

st->op->cond
cond(yes)->e
cond(no)->op

この様なフローチャートが表示される筈です。

ところが、実際にstackeditで書いてみると、

フローチャートが表示されません。困りました。

原因を調べてみた

Chromeのシークレットモードで、stackeditにアクセスして、welcome document(?)を表示させてみる事にしました。
URLは下記の通りです。
https://stackedit.io/app#

welcome documentを見ると、フローチャートがしっかりと表示されていました。
しかし、書き方が違っている様です。

```mermaid ← 多くのサンプルではflowと書かれている…。
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D

色々と調べてみた結果、どうも、stackeditのversionが上がった事で、今までの記法が使えなくなった様です。

下記URLも、stackeditへのリンクですが、下記ページを開くと、次のようなメッセージが表示されます。
これは古いversion（version 4）へのリンクの様です。（2018年6月時点、現在は使えない可能性があります）
https://stackedit.io/editor#

StackEdit 4 is deprecated
StackEdit 5 is now ready for production!

If you want to migrate, click here to export a backup of your files.
To import the backup in StackEdit 5, go to Menu > More > Import workspace backup.
Open StackEdit 5 now!
You can always click OK to continue with StackEdit 4.

stackeditのversionが5に上がっている様です。
そして、私が使っていたstackeditのversionは、どうも、version.5だった様です。

そして、stackedit version.4のwelcome documentには、フローチャートがしっかりと表示されていました。

```flow
st=>start: Start
e=>end
op=>operation: My Operation
cond=>condition: Yes or No?

st->op->cond
cond(yes)->e
cond(no)->op

Mermaid

version.5のwelcome documentを確認すると、下記の様に書かれています。

You can render UML diagrams using Mermaid. For example, this will produce a sequence diagram:

Mermaid
https://mermaidjs.github.io/

Mermaidを使って、UML diagramsを書くことが可能、としっかりと書かれています。今後はMermaidを使ってくださいね、という事なのでしょうか。

実際にmermaidを使ってフローチャートを書いてみる事にしました。
mermaidの記法について、説明は割愛します。

```mermaid
graph TD;
st(start) --> op["My Operation"]
op --> cond{"Yes or No?"}
cond --> |Yes| e(end)
cond --> |No| op

書き方が悪い（記法を知らない）だけだと思うのですが、「My Operation」と「Yes or No?」の間に、2本の線が並んで表示されるのは、どうにかならないものでしょうか……。調べた範囲では解りませんでした。
下記のように、Noの線が、「My Operation」の上に来るようにしたかったです。

flowchart.jsを使いたい（けど使えなかった）

更に調べていった所、version.4では、flowchart.jsというライブラリを使っているらしい、という事が解りました。（断言はしません）

flowchart.js
https://flowchart.js.org/

実際にMermaidを使ってフローチャートを書いてみたのですが、正直な所、flowchart.jsを使って書いてみたいと考えています。

flowchart.jsを使う方法を、色々調べてみたのですが、flowchart.jsを使う方法は解りませんでした。
ただ、stackeditのissuesを見る限り、version.5では、flowchart.jsは廃止された様です。
（英語は殆ど出来ないので、Google翻訳に頼って調べました）

Hopefully one day we can use flowchart.js instead of Mermaid
https://github.com/benweet/stackedit/issues/1256

http://flowchart.js.org/
I tried to draw a flow chart with mermaid, but it is too ugly.
flowchart.js is better.
Is it possible?

これに対する回答は下記の通りです。flowchart.jsはversion.5で搭載する計画は無い様です。

No plan for that in v5, sorry.

version.4を使えば良いだろう、というツッコミは無しでお願いします。
version.4の使用は既に推奨されていない様ですし、いつ廃止になるか解りませんので。

ただ、私が知らないだけで、外部ライブラリを読み込むなどの方法で、flowchart.jsを使用する事は、可能なのかも知れません。
少し調べてみましたが、情報が見つからないので諦めました。何かご存知の方が居ましたら、ご指摘いただければ幸いです。

終わりに

stackeditは使い始めて日が浅いので、解っていない部分も多いです。
記事中に間違い等ございましたら、ご指摘いただければ幸いです。

参考文献

stackeditor - welcome document
https://stackedit.io/Welcome%20document.pdf

mermaid - GitBook
https://mermaidjs.github.io/

Hopefully one day we can use flowchart.js instead of Mermaid
https://github.com/benweet/stackedit/issues/1256