mermaid jsの不具合を調査
概要
mermaidの文法の解析に誤りがあるのではないのか。それの調査をしていく。
前提知識
markdownにはコードを囲むためにバッククォートを使う。 これ => `
`this is codeblock`
のように、
バッククォートで囲んだものをこの記事では、codeblock, コードブロックと呼ぶ。
不具合の内容
前提
下のMermaid公式のMarkdown formattingセクションにて。
Use double quotes and backticks "` text `" to enclose the markdown text.
--- config: htmlLabels: false --- flowchart LR markdown["`This **is** _Markdown_`"] newLines["`Line1 Line 2 Line 3`"] markdown --> newLines
翻訳:
マークダウンテキストを囲むには、二重引用符とバッククォート "` text `" を使用します。
不具合の再現
公式ドキュメントで再現
markdown["`This `is` _Markdown_`"]
と編集してみた。isを囲んでいるバッククォート`はmarkdwon codeblockを表示するため。
この内容で先ほどのリンクで、Runを押してみると反応がない。
公式Live Editorで再現
---
config:
htmlLabels: false
---
flowchart LR
markdown["`This `is` _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
を表示しようとすると、
Error: Error: Lexical error on line 6:. Unrecognized text.
... markdown["`This `is` _Markdown_`"]
-----------------------^
原因調査
同じ現象についてのIssueがあった。コメントより、
related to #6099 , also blocking a mermaid upgrade in Gitlab: Docs feedback: Rendering of mermaid diagrams appears broken on live docs site (#516805) · Issues · GitLab.org / GitLab · GitLab
#6099に関係があるというので、issue#6099に飛んだ。
これをよんでみると、次のようなコメントがあった。
I think in general, for both 10.x and 11.x, they do not support block level markdown, such as lists, blockquotes, etc. Only inline markdown, such as bold, italics, etc. Much like standard markdown tables, which also only support inline markdown.
翻訳:
一般的に、10.x と 11.x の両方において、リストや引用ブロックなどのブロックレベルのマークダウンはサポートされていません。太字や斜体などのインラインマークダウンのみがサポートされています。これは、インラインマークダウンのみをサポートする標準的なマークダウンテーブルとよく似ています。
ブロックレベルとインラインレベルの定義が分からないが、mermaidjsではコードブロックはそもそもサポートされていないのだろうか。
結論
そもそもインラインレベルしかサポートしていないことが、バグなのか仕様なのかが分からない。ブロックレベルとインラインレベルの定義が分からないし、コードブロックがブロックレベルなのかどうかも分からない。
とりあえずgithub discussionに質問して、引き続き調査をしていく。