Draw.io Integration でデフォルトのデザインを変更したい

Last updated at 2024-09-06Posted at 2024-08-30

TL;DR

Draw.io Integrationでコネクタのデフォルトデザインを折れ線にしたいなら、settings.json に以下の内容を追加すればいい。

{
    /* ここらへんにほかの項目 */
    "hediet.vscode-drawio.defaultEdgeStyle" : { // コネクタのデザイン変更.
        "edgeStyle" : "elbowEdgeStyle" // 折れ線にする.
    }
}

ほかの設定がしたい場合は目次のやりかたからどうぞ。

前提

VSCode + Draw.io Integration ユーザであること
Windows上で利用していること（web版以外なら使えそうな気がするけど）

どっちが好き？

突然ですが。

皆さん、UML 書いてますか？
私はよく書いてます。

さて、UMLにはいろいろな種類がありますが、最近の私はコミュニケーション図 もどき を書くことが多いです。だいたい ↓ みたいな感じ。

ちなみに題材は適当です。それはともかく。
この手の図でコネクタを書く時、あるいは見るときでもいいんですが、

「給料を払う」みたいな 折れ線
「労働力を提供」みたいな直線

どっちが好きですか？ちなみに私は断然 折れ線 です。

なんですけど。

私が普段使いしている Draw.io Integration って、デフォルトは直線なんですよね。設定済みのファイルをコピーしてきた時はいいんだけど、新しくファイルを作って開くと一本目は直線になるので少しイラっと来ます。

「どうにかしてえなぁ」
「どうにかなんねえかなぁ」

どうにかしました。

やりかた

とはいっても、設定方法は公式から説明されています。

公式リンク

ただし英語です。私は最初このページを見たとき、自動翻訳で崩れた文章を読むのが面倒で一部を読み飛ばし、読めばわかることを探して長くさまようことに…（約2時間）。

ここでは画像を交えつつ、日本語で説明していきます。

まずは Draw.io Integration の設定画面を開きます。

続いて、コネクタの設定がしたい場合は Default Edge Style、図形の場合は defaultVertexStyle を探し出して、settings.jsonを編集 をクリック。

すると settings.json の設定画面に飛ばされます。

ここに書き込んでいくとスタイルの設定ができるわけですが、設定したいスタイルをどのように表現すればいいかがわからないことには何も書き込めません。

settings.json は開いたまま、Draw.io の編集画面を開いてください。これはデスクトップ版でもいいですし、Draw.io Integration でも構いません。

開いたら、図形の設定をしたければ図形を、コネクタの設定がしたければコネクタを設置し、デフォルトにしたいスタイルを設定してください。ここでは直角（角丸だけど）に折れ曲がるコネクタを例示します。

設定した図形/コネクタを選択した状態で Ctrl + E を押します。

これが選択した図形/コネクタの現在のフォーマットであり、settings.json に記述すべき内容となっています。ただ、このままでは JSON ファイルに書き込めないので、JSON の書き方に変換する必要があります。

まずはこのままだと読みづらいので、; を基準に改行します。

edgeStyle=orthogonalEdgeStyle;
html=1;
exitX=1;
exitY=0.5;
exitDx=0;
exitDy=0;
entryX=0.5;
entryY=0;
entryDx=0;
entryDy=0;

大体こんな感じ。これだけでだいぶん読みやすくなりました。これを JSON の形に書き直します。具体的には、= を : に、; を , に置き換え、左右の文字を " か ' で囲みます。

{
    "edgeStyle" : "orthogonalEdgeStyle", // こんな感じ.
    
    // 数字だけなら囲まなくていいです.
    // true, false, nullなどの場合も同様です. あるかは知りません.
    "html" : 1,
    "exitX" : 1,
    "exitY" : 0.5,
    "exitDx" : 0,
    "exitDy" : 0,
    "entryX" : 0.5,
    "entryY" : 0,
    "entryDx" : 0,
    "entryDy" : 0,
}

これで JSON への書き換えは完了です。最後に、settings.json に戻り、書き換えたものを貼り付けて上書き保存すれば設定は完了です。

{
    /* ここらへんにほかの項目 */
    "hediet.vscode-drawio.defaultEdgeStyle" : {
        "edgeStyle" : "orthogonalEdgeStyle", // こんな感じ.
    
        // 数字とかなら囲まなくていいです.
        // true, false, nullなどの場合も同様です. あるかは知りません.
        "html" : 1,
        "exitX" : 1,
        "exitY" : 0.5,
        "exitDx" : 0,
        "exitDy" : 0,
        "entryX" : 0.5,
        "entryY" : 0,
        "entryDx" : 0,
        "entryDy" : 0,
        // 余談
        // VSCode の json ファイルは JSON with Comments というもので,
        // 最後の , が自動で無視され, C言語と同じ記法でコメントが記述できます.
    }
}

ところで

勘のいい方、あるいは最初のほうから読み進めてくださった方は気づいたかもしれません。

「TL;DR とやりかたで同じことをしてるはずなのに、JSON 別物になってない？」

置き換えを終えた後で申し訳ないのですが、つい先ほどの JSON は無駄があります。というか "edgeStyle" : "orthogonalEdgeStyle" 以外はすべて無駄です。

無駄な項目があったからと言っても（おそらく）問題は起こりません。しいていうなら、

settings.json が汚くなり
数行分のストレージとメモリを食い
マイクロ秒単位で設定の探索が遅れる

かもしれませんがそこまで気にする人はそういないでしょう。

それでも気になるのであれば、ひとつづつ消していってどうなるかを確かめるしかありません。ここでは私が確かめたものだけ残しておきます。

残すべきもの
1. edgeStyle : コネクタの 折れ線/直線 など
消していいもの
1. X, Y, Dx, Dyで終わるもの : （多分）何かしらの座標
2. html : よくわからないが消しても問題は（多分）起こらなかった

おしまい

いかかでしたか？

記念すべき人生初の全体公開記事です。半分備忘録、半分実績作りという感じで書き始めましたが、書き終えて読み直してみると「疲れのわりに量すくねえな」という感じです。あまり続かないかも…。

補足・訂正事項などあれば歓迎しますが、修正は期待しないでください。

履歴

	内容
'24 08/30 23:30	初投稿
〃 09/03 12:30	目次の追加とタグの修正
〃〃/06 09:30	`,`除去が不要であったため修正

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up