Draw.io（diagrams.net）で作成したインフラ構成図をコードで管理する、GitHubで編集差分を確認する | DevelopersIO

こんにちは、CX事業本部 IoT事業部の若槻です。 Draw.io（diagrams.net）は、JGraph Ltdにより提供されているオンラインのダイアグラム作成サービスです。無料で利用可能です。 Diagram Software and Flowchart Maker 今回は、Draw.io（diagrams.net）で作成したインフラ構成図をコードで管理し、GitHubで編集差分を見る方法を確認してみました。 やってみた VS Codeプラグインの導入 Draw.ioの構成図のデータは、Draw.io Integrationというプラグインを使えばVisual Studio Codeで編集できます。とても便利なプラグインなので導入します。 Draw.io Integration - Visual Studio Marketplace Draw.ioで構成図を作成する Draw.io

[lbtmplz]

前に頑張って作った図の日本語が全て文字化けしたので二度と信用しない

[shodai]

SVGだと絵が壊れるんだけど、対処方法が分からない

[su_zu_ki_1010]

WindowsだとDesktop版のDraw.ioがある。デフォルトだと保存する時に圧縮化されてしまうので、コードの差分管理をしたいならファイル→属性で出てくる子画面の「圧縮」チェックを外す。

[ed_v3]

PlantUMLとかmermaidみたいなことができるのかと思ったら単にsvgファイルをgit管理するってだけか。

[tk_musik]

お、便利。

[kazkaz03]

単に画像を横に並べて表示するのを差分というのか

[pj_lim]

べ

[peketamin]

“また[rich diff]では、レンダリングされた構成図の差分を並べて確認することができます。これは便利ですね！！”

[jsoizo]

こりゃいいですね