Mermaid記法への対応

[TakamiChie]

お世話になっております。

表題の通りではございますが、この拡張機能をMermaid記法に対応させることはできないでしょうか？

• mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.

ソースコードを確認したところ、プレビューについてはHTMLにmermaid.jsへの参照を追加後、markdown-book-preview-convert.js、45行目付近に処理を追加すれば対応ができるのではないかと類推しております。

mdbp-vscode/lib/markdown-book-preview-convert.js

Lines 45 to 54 in a1ca7d3

	highlight: function(code, lang) {
	let out = code;
	// ```言語名 での指定があればそれを使う
	try {
	out = hljs.highlight(code, {language: lang}).value;
	} catch (e) {
	out = hljs.highlightAuto(code).value;
	}
	return out;
	}

また、mermaid-cliパッケージに含まれるコマンドを利用すれば、グラフの画像化も可能かと思います。

• mermaidjs/mermaid.cli: Development has been moved to https://github.com/mermaid-js/mermaid-cli

しかしながら、本拡張のビルド手法等に関するドキュメントがなく、こちら側ではパッチの作成および・プルリクエストの作成を行うことができません。

つきましては、Mermaid記法への対応を、お願いしたいと思っています。
開発工数の問題であれば、ビルドやテスト実行の手順をご教示頂ければ、当方での開発も検討しています。

ご検討頂けますと幸いです。

なお、以下がMermaid.jsの使用例となります(Mermaid.js, domtoimage.js, filesaver.jsを利用)。

• Mermaid.js TEST

[lwohtsu]

お世話になっております。
この拡張機能は、並行で執筆が進んでいるいくつかの案件で使用しているため、フォークして別の拡張機能として改造することでしたら可能です。
ただ、こちらでもmermaidの組み込みを検討したことはあるのですが、単純にmemaid.jsを参照するだけだと難しいようです（一応こうしたらできるかもという案もあとで触れます）。

[lwohtsu]

単純なHTMLプレビューだけでしたら、原稿フォルダ内に_template.htmlというファイルがあるので、そこにmemaid.jsを実行するコードを追加するだけでできます（MDBPのコマンドパレットだけで実行できる「Preview HTML」という機能を利用します）。

ただし、MDBPはVivliostyleというCSS組版ソフトに強く依存していまして、それで表示できないと仮組みにすることができません。
https://vivliostyle.org/ja/

Vivliostyleの内部は私もぼんやりとしか把握していないのですが、非同期通信でHTMLとCSSを読み込み、各要素の高さを調べてページの高さに収まるよう分割し、ページ番号などを追加して表示する処理をしています。
そのレンダリング処理と並行してmermaid.jsが実行されるため、一部のページの図だけ表示され、他は高さ0と見なされて消えてしまうという現象が起きます。

これを避けるには、mermaid.jsの処理が完了してから、VivliostyleにHTMLを渡す必要がございます。

[lwohtsu]

試してはいないのですが、通常のmermaid.jsではなく以下のremark-mermaidというものを使うと、markdown→HTMLの変換処理内でmermaid.jsの処理を行うことができそうです。外部SVGファイルとして書き出す形なら成功率は高そうです。
https://github.com/temando/remark-mermaid

現状のMDBPは、marked.jsというMarkdownパーサを使用しているのでそれをremarkに置き換え、remark-mermaidとremark-highlight.jsかrehype-highlightというものを組み込む形に直せば、mermaid.js対応ができそうな気がします。
具体的には、markdown-book-preview-convert.jsの35～55行目をゴッソリ置き換えて、旧バージョンとの互換性が保たれることを確認できればいけるのではないか……と、考えたところで、年内は開発期間が取れそうもないので後検討としている状況です。

[lwohtsu]

ちなみに、この拡張機能のビルド方法ですが、自分しかいじることがないのでうろ覚えな部分もあって恐縮なのですが、

1. リポジトリをクローンする
2. ローカルリポジトリ内でnpm installを実行
3. 「npm -g install vsce」でvsceをグローバルインストールする
4. VSCodeでローカルリポジトリを開いてコードを編集
5. 「npx webpack --mode production」を実行
6. VSCodeに戻ってF5キーを押すと、テスト実行用の環境が開く
7. 問題がないようなら、package.jsonのversionを増やす
8. 「npx vsce publish」で公開する

となります。

別の機能拡張として公開するには、Azureのアカウントを作ってパーソナルアクセストークンを発行する必要もあったような気がします（うろ覚えで申し訳ありません）。
以下のページに当時の覚え書きを残しています。
https://libroworks.co.jp/?p=6183