Closed2021/05/07にクローズ5

drawio の各ノードの位置をスクリプト経由で取得する

検索しても出てこなかったので、残しておく。
もしかしたら、誰もが知っている当たり前すぎる知識なのかもしれない。

draw.io のUI上では、図のように各ノード(など)の位置情報が取得できる。
これを一個一個コピペするのは悲しい作業なので、一括で情報を抜き出したいという話。

方法

drawio から SVG形式でエクスポートする
できた HOGE.svg　を HTML として読みこんで、text タグの部分を抜き出す
タグ内のxとy属性? の値を調べる

ちょっとした注意点

draw.io の UI 上で表示される座標が示すポイント：ノードの左上の隅
svg ファイルから取得できる座標が示すポイント：ノードの中心

また、svg ファイルでは画像の左上が (0,0) となるように座標が再計算される

例えばスクラップの一番上の画像の draw.io では、実はページの左上が (0, 2070) なので、
svg から取得できる座標は「左上の座標が (745, 150) に修正されたノードの中心」となる

python だとこんな感じ

from bs4 import BeautifulSoup
from pathlib import Path

with (Path.cwd() / "HOGE.svg").open("r", encoding='utf-8') as fr:
    data = fr.read()

soup = BeautifulSoup(data, "lxml")

for tag in soup.find_all("text"):
    print(f"{tag.string}:\t({tag['x']}, {tag['y']})")

このスクラップは2021/05/07にクローズされました