経緯
mermaid.jsで生成したSVGをExcel/PowerPoint/Wordに画像として挿入すると
- テキストだけ表示されないもの
- 色がおかしくなるもの
などの症状に遭遇したので、mermaid.js公式ページの
- flowchart
- sequenceDiagram
- classDiagram
- stateDiagram-v2
- erDiagram
- journey
- gantt
- pie
- requirementDiagram
- gitGraph
- C4Context
のサンプルからSVGを作成して、Officeアプリへの貼り付けと解析を実施。
(※v9.1.7時点)
調査結果
SVGの中身はテキストなのでエディタでいろいろ編集して画像挿入を試してみた結果、Officeアプリは
-
<foreignObject>～</foreignObject>の間にあるテキストをパースできてない
（Inkscapeもパースできてないけど）
※mermaid.jsのflowchart/classDiagram/stateDiagram-v2あたりが該当 -
色指定がhsl()だと同じくパースできない
※mermaid.jsのsequenceDiagramのループの点線/pieなど
ことが判明。
思案
Microsoftに修正依頼するべきか、mermaid.js開発者に
<switch>
<foreignObject>
テキスト
</foreignObject>
<text >
テキスト
</text>
</switch>
のように
- <switch>＆<text>タグの追加
- 色指定をRGB()に統一
をお願いするべきか。
余談
ちなみに、mermaid.js v9.1.3のC4Contextは生成されたSVG内の
<image xlink:href～
の"xlink:"を削除してやれば表示できるようになります。
v9.1.7では直ってますね。