Mermaid記法への対応

TakamiChie commented 2 years ago

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

表題の通りではございますが、この拡張機能を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行目付近に処理を追加すれば対応ができるのではないかと類推しております。 https://github.com/libroworks/mdbp-vscode/blob/a1ca7d39a195cec44cf068f51788fc1292cd9db0/lib/markdown-book-preview-convert.js#L45-L54

また、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 commented 2 years ago

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

lwohtsu commented 2 years ago

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

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

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

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

lwohtsu commented 2 years ago

試してはいないのですが、通常の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 commented 2 years ago

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

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

となります。

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

libroworks / mdbp-vscode

Mermaid記法への対応 #1