# How to interpret Graphviz Edge coordinates from xDOT or JSON **URL:** \ **Category:** Help\ **Created:** [October 12, 2021, 7:04am UTC](https://forum.graphviz.org/t/how-to-interpret-graphviz-edge-coordinates-from-xdot-or-json/879 "2021-10-12T07:04:41Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![robin](https://avatars.discourse-cdn.com/v4/letter/r/e5b9ba/32.png) [@robin](https://forum.graphviz.org/u/robin)\ **Post date:** [October 12, 2021, 7:04am UTC](https://forum.graphviz.org/t/how-to-interpret-graphviz-edge-coordinates-from-xdot-or-json/879/1 "2021-10-12T07:04:42Z")
Hi, I am trying to use the graphviz layout algorithms to format [draw.io](http://draw.io) documents. Currently a bit stuck on how to port over the edge coordinates. I exported the result as xDOT to parse the edge coordinates. However, they are not translating over very well. Is the pos here showing x,y coordinates with the first pair being closest to “a”, and the last pair closest to the “b”? a → b pos=“e,3094.7,304.61 2724.3,353.36 2800.6,344.76 2948.7,327.27 3084.5,306.2”]; Really appreciate the help! ---
**Author:** ![steveroush](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@steveroush](https://forum.graphviz.org/u/steveroush)\ **Post date:** [October 12, 2021, 2:23pm UTC](https://forum.graphviz.org/t/how-to-interpret-graphviz-edge-coordinates-from-xdot-or-json/879/2 "2021-10-12T14:23:41Z")
The **pos** syntax is described here: [pos | Graphviz](https://graphviz.org/docs/attrs/pos/), here [splineType | Graphviz](https://graphviz.org/docs/attr-types/splineType/) and page 36 of [https://www.graphviz.org/pdf/dotguide.pdf](https://www.graphviz.org/pdf/dotguide.pdf) What you are seeing is a combination of cubic B-splines and arrowheads. Note that this is true even for straight lines. p.s. Once you have the conversion understood, you might consider adding a [draw.io](http://draw.io) output routine to Graphviz. See [https://graphviz.org/doc/addingLayout.txt](https://graphviz.org/doc/addingLayout.txt) and Section 6 of [https://graphviz.org/pdf/libguide.pdf](https://graphviz.org/pdf/libguide.pdf) ---
**Author:** ![robin](https://avatars.discourse-cdn.com/v4/letter/r/e5b9ba/32.png) [@robin](https://forum.graphviz.org/u/robin)\ **Post date:** [October 13, 2021, 7:01am UTC](https://forum.graphviz.org/t/how-to-interpret-graphviz-edge-coordinates-from-xdot-or-json/879/3 "2021-10-13T07:01:49Z")
Thank you for your reply! Really appreciate your help because I was lost. I figured one thing out today that helped. I realized Graphviz nodes grow downwards as the y coordinate value gets higher. The opposite is true in Drawio. So I was able to recreate the same vertex positions from graphviz in [Draw.io](http://Draw.io) by subtracting the largest value of the Y bounding box with the given coordinate Y value. I also had to convert the graphviz coordinate from the center of the node, to the bottom left corner of the node (which Drawio expects). Still having some trouble with edges though. I set the spline=polyline on the graph, to get points instead of a Bezier curve. I translated the y coordinates of these edge points the same way as above. However, the edges go through the vertice. Any ideas on what I can try or read? Drawio: ![Screen Shot 2021-10-12 at 11.56.40 PM](https://global.discourse-cdn.com/graphviz/original/1X/50280afd0f1b5cb7190a00fff35557655e550eaf.png) ---
**Author:** ![robin](https://avatars.discourse-cdn.com/v4/letter/r/e5b9ba/32.png) [@robin](https://forum.graphviz.org/u/robin)\ **Post date:** [October 13, 2021, 7:02am UTC](https://forum.graphviz.org/t/how-to-interpret-graphviz-edge-coordinates-from-xdot-or-json/879/4 "2021-10-13T07:02:23Z")
Desired Graphviz output: ![Screen Shot 2021-10-12 at 11.59.16 PM](https://global.discourse-cdn.com/graphviz/original/1X/53143ff29e874d61f034463ffee2a715d9486e6c.png) ---
**Author:** ![steveroush](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@steveroush](https://forum.graphviz.org/u/steveroush)\ **Post date:** [October 13, 2021, 2:59pm UTC](https://forum.graphviz.org/t/how-to-interpret-graphviz-edge-coordinates-from-xdot-or-json/879/5 "2021-10-13T14:59:24Z")
Add **-y** to your dot/fdp/neato/… command line ([Command Line | Graphviz](https://graphviz.org/doc/info/command.html)). This should flip the Y coordinates. ---
**Author:** ![robin](https://avatars.discourse-cdn.com/v4/letter/r/e5b9ba/32.png) [@robin](https://forum.graphviz.org/u/robin)\ **Post date:** [October 13, 2021, 4:43pm UTC](https://forum.graphviz.org/t/how-to-interpret-graphviz-edge-coordinates-from-xdot-or-json/879/6 "2021-10-13T16:43:20Z")
oh thanks! Didn’t know what. Does setting spline=polyline make it so the pos field contains flattened points from the bezier curve? I’m getting this output from the JSON now for an edge. “\_gvid”: 0, “tail”: 0, “head”: 1, “_draw_”: [ { “op”: “c”, “grad”: “none”, “color”: “#000000” }, { “op”: “b”, “points”: [[82.490,503.940],[78.400,488.450],[73.000,468.000],[73.000,468.000],[73.000,468.000],[73.000,288.000],[73.000,288.000],[73.000,288.000],[76.430,275.020],[79.890,261.900]] } ], “_hdraw_”: [ { “op”: “S”, “style”: “solid” }, { “op”: “c”, “grad”: “none”, “color”: “#000000” }, { “op”: “C”, “grad”: “none”, “color”: “#000000” }, { “op”: “P”, “points”: [[83.320,262.620],[82.490,252.060],[76.560,260.840]] } ], “pos”: “e,82.493,252.06 82.493,503.94 78.401,488.45 73,468 73,468 73,468 73,288 73,288 73,288 76.429,275.02 79.894,261.9” ---
**Author:** ![steveroush](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@steveroush](https://forum.graphviz.org/u/steveroush)\ **Post date:** [October 13, 2021, 8:34pm UTC](https://forum.graphviz.org/t/how-to-interpret-graphviz-edge-coordinates-from-xdot-or-json/879/7 "2021-10-13T20:34:07Z")
I don’t know what “flattened points from the bezier curve” means. If your edges only consist of straight line segments: - toss out any eX,Y or sX,T points (save for later) - use points #1, 4, 7, 10, 13, … to define your straight line segments in [draw.io](http://draw.io). - points 1 & 4 - points 4 & 7 - points 7 &10 - … - eX,Y or sX,T points identify arrowhead intersection points with the node ---
**Author:** ![steveroush](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@steveroush](https://forum.graphviz.org/u/steveroush)\ **Post date:** [October 13, 2021, 8:38pm UTC](https://forum.graphviz.org/t/how-to-interpret-graphviz-edge-coordinates-from-xdot-or-json/879/8 "2021-10-13T20:38:57Z")
FYI, here is an example of the points used by dot to define two curved edges: ![html_dot](https://global.discourse-cdn.com/graphviz/original/1X/2977154aa116203d32d1fb9bb17e7691b243b31d.png) ---
**Author:** ![smattr](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/smattr/32/85_2.png) [@smattr](https://forum.graphviz.org/u/smattr)\ **Post date:** [October 14, 2021, 4:27am UTC](https://forum.graphviz.org/t/how-to-interpret-graphviz-edge-coordinates-from-xdot-or-json/879/9 "2021-10-14T04:27:04Z")
My monthly PSA: the forum supports code blocks with Graphviz syntax highlighting: ````auto ```dot digraph { like -> so[with="a label"]; } ``` ```` which produces: ```auto digraph { like -> so[with="a label"]; } ``` ---
**Author:** ![robin](https://avatars.discourse-cdn.com/v4/letter/r/e5b9ba/32.png) [@robin](https://forum.graphviz.org/u/robin)\ **Post date:** [October 14, 2021, 6:27pm UTC](https://forum.graphviz.org/t/how-to-interpret-graphviz-edge-coordinates-from-xdot-or-json/879/10 "2021-10-14T18:27:24Z")
Thank you @smattr and @steveroush. Really appreciate your help and responses for this problem. Using the 1st and 4th points to form straight line segments was an improvement. However, I really wanted to get the smoothed out curve that steveroush you posted in your example. Here’s what I ended up doing that worked really well. Summarizing for anyone else with a similar problem: 1. Generate JSON or XDOT format with splines=spline in the graph and -y to flip the coordinates. 2. Add all the nodes to mxGraph, but make sure to transform the pos from the center of the node, to the bottom left corner (which mxgraph wants). 3. Take the b-spline control points in pos for each edge (should be 4 points), and interpolate concrete points from it. I sampled 8 points per b-spline, and it gave me a very smooth resulting curve. Reference code I used to sample the b-spline: [b-spline/index.js at master · thibauts/b-spline · GitHub](https://github.com/thibauts/b-spline/blob/master/index.js#L59-L71). Add all these points to your mxGeometry. 4. Take the eX,Y or sX,Y and add it to mxGeometry (at the end if end point, beginning if starting points). I’ll consider adding an output routine later. ---
**Author:** ![schmoo2k](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/schmoo2k/32/29_2.png) [@schmoo2k](https://forum.graphviz.org/u/schmoo2k)\ **Post date:** [October 15, 2021, 6:27am UTC](https://forum.graphviz.org/t/how-to-interpret-graphviz-edge-coordinates-from-xdot-or-json/879/11 "2021-10-15T06:27:15Z")
FWIW I use the JSON response with the following translations to feed directly into an SVG Path Element: 1. Drop the leading text 2. Split the string on " " 3. Convert the pos from Inches to pixels 4. Invert the X + Y 5. Feed directly into an SVG Path Element [Visualization/graphviz.ts at trunk · hpcc-systems/Visualization (github.com)](https://github.com/hpcc-systems/Visualization/blob/trunk/packages/graph/workers/src/graphviz.ts#L38-L93) - Includes some offsetting based on width and height… ---
**Author:** ![hbmartin](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/hbmartin/32/1635_2.png) [@hbmartin](https://forum.graphviz.org/u/hbmartin)\ **Post date:** [August 13, 2024, 9:22pm UTC](https://forum.graphviz.org/t/how-to-interpret-graphviz-edge-coordinates-from-xdot-or-json/879/12 "2024-08-13T21:22:02Z")
Hello - I know this an old thread but came across it looking to do something similar. The approach I ended up taking was: 1. Render the graph as SVG and extract the edge curves 2. If the curve is not a straight(ish) line, take the cubic bezier 3. Decompose the cubic into 1, 2, or 3 curves (depending on the number of inflections 4. Approximate each of those curves as quadratic bezier (since [draw.io](http://draw.io) does not support cubic curves) 5. Write the quadratics to mxGraph / [draw.io](http://draw.io) format You can try it out with my [command line tool](https://github.com/hbmartin/graphviz2drawio) and take a look at the implementation [here](https://github.com/hbmartin/graphviz2drawio/blob/master/graphviz2drawio/mx/CurveFactory.py#L7)