Zenn
Closed5

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

draw.io
nikogolinikogoli

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

nikogolinikogoli

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

nikogolinikogoli

方法

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

ちょっとした注意点

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

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

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

nikogolinikogoli

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にクローズされました