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
```

この様なフローチャートが表示される筈です。
![1.png](https://qiita-image-store.s3.amazonaws.com/0/211174/5fab006f-0cd3-ca68-752e-49994c6e38ac.png)

ところが、実際にstackeditで書いてみると、
![2.png](https://qiita-image-store.s3.amazonaws.com/0/211174/86d6c59f-f58a-1e4c-3b4f-9d0491681a10.png)

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

# 原因を調べてみた

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

welcome documentを見ると、フローチャートがしっかりと表示されていました。
しかし、書き方が違っている様です。
![3.png](https://qiita-image-store.s3.amazonaws.com/0/211174/564d31cf-cba0-588c-070c-33d65ceb619e.png)

```
```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には、フローチャートがしっかりと表示されていました。

![4.png](https://qiita-image-store.s3.amazonaws.com/0/211174/2b89a8d8-7405-4136-195b-73d7f829f1c9.png)

```
```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](https://mermaidjs.github.io/). For example, this will produce a sequence diagram:

Mermaid
https://mermaidjs.github.io/

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

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/211174/5933a2d6-f44e-3168-51fa-481bf7198a5e.png)

```
```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」の上に来るようにしたかったです。

![1.png](https://qiita-image-store.s3.amazonaws.com/0/211174/5fab006f-0cd3-ca68-752e-49994c6e38ac.png)

# 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