リッチエディタで diagrams.net を利用する

CodeDockの応用

h:400

背景

  • 図形の作成に inkscape を使っている

  • 更新時の作業が煩雑になる

    • 保存⇒アップロード⇒プレビューが必要

  • 作成した図形の管理も煩雑

できれば「保存」と「アップロード」は 1 手順にまとめたい。

diagrams.net(drawio)

diagrams.net の評判が良かったので少し試してみた。

  • ネット上のサービスと相性が良さそう

    • svg として埋め込むコードをコピーできる等

  • GitHub へコミットできる

mardock 上でも少ない修正で対応できそうだったので、次ページから実際に図形を張り付けながら試してみる。

なお、「diagrams.net から microCMS ライブラリへアップロード」できれば全て解決だが、Hobby プランでは無理そうなので検討はしていない。

案 0. ダウンロードしてアップロード

概要

  1. diagrams.net で図形作成
  2. export で svg ダウンロード
  3. ライブラリにアップロード

h:260

結果

  • とくに捻りもなく通常の画像を扱うのと同じ
  • 煩雑さも inkscape で図形作成していたのと同じ
  • エディター内にインラインで図形が表示されるのはよい
  • svg だと imgix が使えないので良さは半減
  • svg だと marp(inline svg)の Auto-Scaling と干渉？する？
  • 最終的にはここに落ち着きそうな予感はしている
  • ブラウザー拡張を書いたらダウンロードしなくてもアップロードできるか？

案 1. svg としてコピペ

概要

  1. diagrams.net で図形作成
  2. embed で svg コピー
  3. CodeDock で markdown として貼り付け

5Zhbb5swFMc/DdL20Apjro/k0qy7aVO25tnBh4ticGacJumnnwkmhBAta6esrSpF0eFv+xif3/EBY+BhvpkIsky/cArMsEy6MfDIsCzPt9R/JWxrwUF2LSQio7VktsI0e4BaRI26yiiUWqslyTmT2bIrRrwoIJIdjQjB191uMWe0IyxJAj1hGhHWV2cZlWmt+pbX6h8gS9JmZuQGdUtOms56JWVKKF8fSHhs4KHgXNZWvhkCq2LXxGV2u52xzwt38vF7+Yv8HHz68fXuqnZ285gh+yUIKOSTXaPxAzNhgpa33L4NZ/hhWMBVA/OesJUOmF6s3DYRFHxVUKi8IAMP1mkmYbokUdW6VimjtFTmTDeXUvDFPtIqRoM4Y2zWRNiuepMoXQmYVENHfiuERbKb0nb0qCFnXOzuAccxuFFU+V+AjNLOZAfdqBfMTVO16FWBkLA5yoMzQUR7smpHAM9Biq0a13hxajd6M9j6ct1mlhW4tZYeZJXl6hwiOpuTveeWmDI0tEcAtF4HP0rAj8/zcyMf5vEF+dnBSwPo9QGOseFjIwy1oX7aQDvDMkK/UbxGwdoY3BiWy9RdD+ZCWUllvRuqoj7i0eJ9LzdUeGUPRMELOEKopYNEiXkhdbW37OZaO67aK3aZKsMhy5JCaXlGadU4IFqIFEcQF2TtBKjD2uuzRqbZZ21fCjXuoYZ8rjbmbirLnN5NTrBruDZJENiNEb4tnNgxOzj3tfjZeJqvo/YCog54Z2tv4HqYuBcE6AUdfggHfX7eCX7oYgD7Lz9UkHXG39S+Qgh3ufj4mfcV6j8TaUYSQfLyugD5xuh0q57rPzcc9Dqqnqp5PrXPVj3fmmP3klXPca2XVvasv3hwqcPusjJjBpuwOoarEEFBtTmKGCnLLPoTSXsfVKC9I/rTQnoQMudExBpNACMyu+/OeSqKeoZvPFN3075o4O57I/K9aw/7DnICE5muaTpdjyVfiQi0k8MD+JFf23V7fo9cSSISkD1XO8r7OPwD+P7eLe+TN1VPncD7b087ddl+HaoZtp/Y8Pg3" onclick="(function(svg){var src=window.event.target||window.event.srcElement;while (src!=null&&src.nodeName.toLowerCase()!='a'){src=src.parentNode;}if(src==null){if(svg.wnd!=null&&!svg.wnd.closed){svg.wnd.focus();}else{var r=function(evt){if(evt.data=='ready'&&evt.source==svg.wnd){svg.wnd.postMessage(decodeURIComponent(svg.getAttribute('content')),'*');window.removeEventListener('message',r);}};window.addEventListener('message',r);svg.wnd=window.open('https://viewer.diagrams.net/?client=1&page=0&edit=_blank');}}})(this);" style="cursor:pointer;max-width:100%;max-height:262px;">
リッチエディタ
(CodeDock)
リッチエディタ(CodeDoc...
embed as SVG
(コピペ)
embed as...
drawio
drawio
diagrams.net
diagrams...
svg
svgViewer does not support full SVG 1.1

結果

  • <svg> 直接だとレンダリングされないので <p> などで囲む

  • <svg> ソースはサイズが大きいので編集が面倒

    • Ctrl + A のように全選択して貼り付け直すことができない

  • 図形の表示サイズなどをエディター内で指定できない

  • marp の背景等は指定できない

  • リッチエディタで文字参照を扱うには編集者が手動で対応する必要があるため、単純な <svg> ソースの貼り付けは危険

結論としては実用的ではない。

案 2 iframe で埋め込む

概要

  1. diagrams.net で図形作成
  2. embed で iframe コピー
  3. markdown として貼り付け(リッチエディタの「埋め込み」は対応していないもよう)
<iframe frameborder="0" style="width:100%;height:264px;" src="https://viewer.diagrams.net/?highlight=0000ff&edit=_blank&layers=1&nav=1&title=embed-as-iframe#Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fhankei6km%2Ftest_diagram.drawio%2Fmain%2Fembed-as-iframe"></iframe>

結果(表示等)

  • svg として貼り付けと同様にリッチエディタの文字参照問題はある

  • PDF 等への変換では表示された状態行われる(常に行われるかは不明、CodePen の iframe は表示されなかった)

  • 表示までの時間が長い

    • diagrams.net 側のメッセージが表示されるが空白の状態もある

  • iframe の透過指定はできない(css - Transparent Iframe Body - Stack Overflow)

  • marp の背景等は指定できない

結果(更新関連)

  • diagrams.net の更新は反映されるが不都合も多い

    • ビルド側で変更を検出できない

      • PDF 等はビルドを通さないと更新されない

    • HTML ページとしての表示では本番へ即座に反映されてしまう

      • GitHub 保存ではブランチを切ることはできるが、git コマンド等の対応が必要

特性にあわせての使いどころもありそうだが今回は marp での利用を考えると厳しいか。

案 3 編集可能な画像として保存

概要

  1. diagrams.net で図形作成
  2. 「Editable Bitmap Image(.png)」として GitHub に保存
  3. markdown として画像表示(リッチエディタは外部画像に非対応)
![h:200](https://github.com/hankei6km/test_diagram.drawio/raw/main/save-as-editable-image.png)

h:200

結果(表示等)

  • 表示可能(svg の場合は https://raw.githubusercontent.com/ 指定で表示される)
  • ただしリッチエディタの管理から外れるのでインライン表示はできない
  • imgix からのダウンロードに比べると表示に時間がかかる？
  • その他は通常の画像として扱える(Editable の影響度は不明)

h:200

結果(更新関連)

  • diagrams.net の更新は反映されるが不都合も多い

    • ビルド側で変更を検出できない

      • PDF 等はビルドを通さないと更新されない

    • HTML ページとしての表示では本番へ即座に反映されてしまう

      • GitHub 保存ではブランチを切ることはできるが、git コマンド等の対応が必要？

    • キャッシュの更新タイミングが不明

運用の方法に気を付ければ実用度は高い。