Removed SVG and fiddled with code listings, since the GitBucket markdown renderer is a bit crap.

nigel.stanger / templates

forked from mark.george/templates

Browse code Removed SVG and fiddled with code listings, since the GitBucket markdown renderer is a bit crap. master
1 parent 26c9166 commit a1be7fe3ad9d79ce5d4e7adb42267b71c205ebd7 Mark George authored on 4 Feb 2016

Patch

Showing 1 changed file

Ignore Space Show notes View plantuml/class-diagram-tips.md
## Controlling Class Layout Layout is determined dymanically, so can be tricky if you are trying to get a specific layout, but you can usually beat it into submission with a combination of the following: ' force class diagram mode class c1 ' horizontal placement c1 -> c2 ' vertical placement c2 --> c3 ' left placement c4 -left-> c4 You can use `left`, `right`, `up`, and `down` to control placement direction. If adding a link screws up the class placement you can use `[norank]` to exclude the link from the layout process: ' link will not affect class placement c4 -[norank]-> c2 You can also use `[hidden]` to create invisible links solely for the purpose of influencing the layout. Repeating them will increase the likelihood that the classes will be placed closer and even be aligned with each other: ' place c2 and c4 closer together c2 -[hidden]-> c4 ' repeated again to place c2 and c4 even closer c2 -[hidden]-> c4 Note that although the links are hidden they still affecting the drawing of links on the same path. If you temporarily remove the `[hidden]` option you can see what is going on. You can fiddle with the ordering and direction to ensure the one that is being drawn is in the place that you want it (usually in the middle). The trick is to use identical links with the same class ordering and direction. If you want the link drawn in the opposite direction you can't flip the order of the classes - you need to swap the placement of the arrow: ' place c2 and c4 closer c2 -[hidden]- c4 ' draw the actual link between the hidden links c2 <-[norank]- c4 ' place c2 and c4 even closer c2 -[hidden]- c4 ### General Layout Tips Understanding how the layout engine works (GraphVis) makes it easier to get what you want. The previous example with the `[hidden]` and `[norank]` links got weird because we were giving the layout engine conflicting information. The layout is determined by the order that classes occur. Classes are drawn at the top of the document have higher ranking than those below. The rank is determined by: * The order in which classes are added to the diagram * The layout hints (horizontal, vertical, left, right, up, down) * The direction in which the links are defined. The class on the left has higher rank than the one on the right: `higher -> lower` Link direction can have a dramatic impact. If we add a `c4 --> c2` link we confuse the engine by having `c4` on the left which gives it a higher ranking than `c2` and causes the diagram to flip upside down: class c1 c1 -> c2 c2 --> c3 c3 -left-> c4 ' whoops, this flips the diagram on its head c4 --> c2 Drawing links from the top down prevents this re-ranking problem, and means you don't have to use `[norank]` as often. Since the arrow direction has no effect on the layout we can just flip the end that the arrow is drawn at to account for the link being in a different order: ' ranking maintained, so layout isn't dramatically affected ' arrow drawn at opposite end to account for reverse order c2 <-- c4 We could have also used the `up` layout hint to prevent the re-ranking: c4 -up-> c2 ## Layout Direction You can change the ranking direction from vertical to horizontal using `left to right direction`: left to right direction class c1 c1 -> c2 c2 --> c3 c3 -left-> c4 c2 <-- c4 This also changes the meaning of the layout hints. Horizontal hints become vertical, etc. ## Spacing You can control the spacing between class using the `NodeSep` and `RankSep` skinparams. SkinParam { NodeSep 45 ' horizontal spacing RankSep 45 ' vertical spacing } ## Controlling Class Layout Layout is determined dymanically, so can be tricky if you are trying to get a specific layout, but you can usually beat it into submission with a combination of the following: class1 -> class2 ' horizontal placement class2 --> class3 ' vertical placement class4 -left-> class4 ' left placement <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="173px" style="width:140px;height:173px;" version="1.1" viewBox="0 0 140 173" width="140px"> <defs> <filter height="300%" id="f1" width="300%" x="-1" y="-1"> <feGaussianBlur result="blurOut" stdDeviation="2.0"/> <feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/> <feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/> <feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/> </filter> </defs> <g> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="6" y="8"/> <ellipse cx="21" cy="24" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M18.9063,23.8438 Q18.9063,25.7188 19.4844,26.7266 Q20.0625,27.7344 21.2188,27.7344 Q22.5625,27.7344 23.2188,25.7188 L25.4844,26.1406 Q24.375,29.6719 21.2031,29.6719 Q18.8594,29.6719 17.6406,28.1875 Q16.4219,26.7031 16.4219,23.8438 Q16.4219,18.125 21.125,18.125 Q22.6719,18.125 23.7109,18.9375 Q24.75,19.75 25.25,21.3594 L22.9844,21.9063 Q22.75,21.0313 22.2656,20.5391 Q21.7813,20.0469 21.1563,20.0469 Q18.9063,20.0469 18.9063,23.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="35" y="28.6553">c1</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="50" y1="40" y2="40"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="50" y1="48" y2="48"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="86" y="8"/> <ellipse cx="101" cy="24" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M98.9063,23.8438 Q98.9063,25.7188 99.4844,26.7266 Q100.0625,27.7344 101.2188,27.7344 Q102.5625,27.7344 103.2188,25.7188 L105.4844,26.1406 Q104.375,29.6719 101.2031,29.6719 Q98.8594,29.6719 97.6406,28.1875 Q96.4219,26.7031 96.4219,23.8438 Q96.4219,18.125 101.125,18.125 Q102.6719,18.125 103.7109,18.9375 Q104.75,19.75 105.25,21.3594 L102.9844,21.9063 Q102.75,21.0313 102.2656,20.5391 Q101.7813,20.0469 101.1563,20.0469 Q98.9063,20.0469 98.9063,23.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="115" y="28.6553">c2</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="87" x2="130" y1="40" y2="40"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="87" x2="130" y1="48" y2="48"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="86" y="116"/> <ellipse cx="101" cy="132" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M98.9063,131.8438 Q98.9063,133.7188 99.4844,134.7266 Q100.0625,135.7344 101.2188,135.7344 Q102.5625,135.7344 103.2188,133.7188 L105.4844,134.1406 Q104.375,137.6719 101.2031,137.6719 Q98.8594,137.6719 97.6406,136.1875 Q96.4219,134.7031 96.4219,131.8438 Q96.4219,126.125 101.125,126.125 Q102.6719,126.125 103.7109,126.9375 Q104.75,127.75 105.25,129.3594 L102.9844,129.9063 Q102.75,129.0313 102.2656,128.5391 Q101.7813,128.0469 101.1563,128.0469 Q98.9063,128.0469 98.9063,131.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="115" y="136.6553">c3</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="87" x2="130" y1="148" y2="148"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="87" x2="130" y1="156" y2="156"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="6" y="116"/> <ellipse cx="21" cy="132" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M18.9063,131.8438 Q18.9063,133.7188 19.4844,134.7266 Q20.0625,135.7344 21.2188,135.7344 Q22.5625,135.7344 23.2188,133.7188 L25.4844,134.1406 Q24.375,137.6719 21.2031,137.6719 Q18.8594,137.6719 17.6406,136.1875 Q16.4219,134.7031 16.4219,131.8438 Q16.4219,126.125 21.125,126.125 Q22.6719,126.125 23.7109,126.9375 Q24.75,127.75 25.25,129.3594 L22.9844,129.9063 Q22.75,129.0313 22.2656,128.5391 Q21.7813,128.0469 21.1563,128.0469 Q18.9063,128.0469 18.9063,131.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="35" y="136.6553">c4</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="50" y1="148" y2="148"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="50" y1="156" y2="156"/> <path d="M51.3125,32 C61.0776,32 70.8427,32 80.6078,32 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="85.7144,32,76.7144,28,80.7144,32,76.7144,36,85.7144,32" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M108.5,56 C108.5,72.003 108.5,93.4461 108.5,110.528 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="108.5,115.6784,112.5,106.6784,108.5,110.6784,104.5,106.6784,108.5,115.6784" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M56.419,140 C66.1841,140 75.9492,140 85.7144,140 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="51.3125,140,60.3125,144,56.3125,140,60.3125,136,51.3125,140" style="stroke: #A80036; stroke-width: 1.0;"/> </g></svg> You can use `left` , `right`, `up`, and `down` to control placement direction. If adding a link screws up the class placement you can use `[norank]` to exclude the link from the layout process: ' link will not affect class placement c4 -[norank]-> c2 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="173px" style="width:140px;height:173px;" version="1.1" viewBox="0 0 140 173" width="140px"> <defs> <filter height="300%" id="f1" width="300%" x="-1" y="-1"> <feGaussianBlur result="blurOut" stdDeviation="2.0"/> <feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/> <feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/> <feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/> </filter> </defs> <g> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="6" y="8"/> <ellipse cx="21" cy="24" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M18.9063,23.8438 Q18.9063,25.7188 19.4844,26.7266 Q20.0625,27.7344 21.2188,27.7344 Q22.5625,27.7344 23.2188,25.7188 L25.4844,26.1406 Q24.375,29.6719 21.2031,29.6719 Q18.8594,29.6719 17.6406,28.1875 Q16.4219,26.7031 16.4219,23.8438 Q16.4219,18.125 21.125,18.125 Q22.6719,18.125 23.7109,18.9375 Q24.75,19.75 25.25,21.3594 L22.9844,21.9063 Q22.75,21.0313 22.2656,20.5391 Q21.7813,20.0469 21.1563,20.0469 Q18.9063,20.0469 18.9063,23.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="35" y="28.6553">c1</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="50" y1="40" y2="40"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="50" y1="48" y2="48"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="86" y="8"/> <ellipse cx="101" cy="24" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M98.9063,23.8438 Q98.9063,25.7188 99.4844,26.7266 Q100.0625,27.7344 101.2188,27.7344 Q102.5625,27.7344 103.2188,25.7188 L105.4844,26.1406 Q104.375,29.6719 101.2031,29.6719 Q98.8594,29.6719 97.6406,28.1875 Q96.4219,26.7031 96.4219,23.8438 Q96.4219,18.125 101.125,18.125 Q102.6719,18.125 103.7109,18.9375 Q104.75,19.75 105.25,21.3594 L102.9844,21.9063 Q102.75,21.0313 102.2656,20.5391 Q101.7813,20.0469 101.1563,20.0469 Q98.9063,20.0469 98.9063,23.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="115" y="28.6553">c2</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="87" x2="130" y1="40" y2="40"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="87" x2="130" y1="48" y2="48"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="86" y="116"/> <ellipse cx="101" cy="132" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M98.9063,131.8438 Q98.9063,133.7188 99.4844,134.7266 Q100.0625,135.7344 101.2188,135.7344 Q102.5625,135.7344 103.2188,133.7188 L105.4844,134.1406 Q104.375,137.6719 101.2031,137.6719 Q98.8594,137.6719 97.6406,136.1875 Q96.4219,134.7031 96.4219,131.8438 Q96.4219,126.125 101.125,126.125 Q102.6719,126.125 103.7109,126.9375 Q104.75,127.75 105.25,129.3594 L102.9844,129.9063 Q102.75,129.0313 102.2656,128.5391 Q101.7813,128.0469 101.1563,128.0469 Q98.9063,128.0469 98.9063,131.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="115" y="136.6553">c3</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="87" x2="130" y1="148" y2="148"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="87" x2="130" y1="156" y2="156"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="6" y="116"/> <ellipse cx="21" cy="132" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M18.9063,131.8438 Q18.9063,133.7188 19.4844,134.7266 Q20.0625,135.7344 21.2188,135.7344 Q22.5625,135.7344 23.2188,133.7188 L25.4844,134.1406 Q24.375,137.6719 21.2031,137.6719 Q18.8594,137.6719 17.6406,136.1875 Q16.4219,134.7031 16.4219,131.8438 Q16.4219,126.125 21.125,126.125 Q22.6719,126.125 23.7109,126.9375 Q24.75,127.75 25.25,129.3594 L22.9844,129.9063 Q22.75,129.0313 22.2656,128.5391 Q21.7813,128.0469 21.1563,128.0469 Q18.9063,128.0469 18.9063,131.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="35" y="136.6553">c4</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="50" y1="148" y2="148"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="50" y1="156" y2="156"/> <path d="M51.3125,32 C61.0776,32 70.8427,32 80.6078,32 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="85.7144,32,76.7144,28,80.7144,32,76.7144,36,85.7144,32" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M108.5,56 C108.5,72.003 108.5,93.4461 108.5,110.528 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="108.5,115.6784,112.5,106.6784,108.5,110.6784,104.5,106.6784,108.5,115.6784" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M56.419,140 C66.1841,140 75.9492,140 85.7144,140 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="51.3125,140,60.3125,144,56.3125,140,60.3125,136,51.3125,140" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M46.1012,115.6784 C58.4422,99.3265 74.9811,77.4126 87.9309,60.254 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="91.1412,56,82.5262,60.773,88.1287,59.9906,88.9111,65.5931,91.1412,56" style="stroke: #A80036; stroke-width: 1.0;"/> </g></svg> You can also use `[hidden]` to create invisible links solely for the purpose of influencing the layout. Repeating them will increase the likelihood that the classes will be placed closer and even be aligned with each other: ' place c2 and c4 closer together c2 -[hidden]-> c4 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="173px" style="width:180px;height:173px;" version="1.1" viewBox="0 0 180 173" width="180px"> <defs> <filter height="300%" id="f1" width="300%" x="-1" y="-1"> <feGaussianBlur result="blurOut" stdDeviation="2.0"/> <feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/> <feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/> <feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/> </filter> </defs> <g> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="6" y="8"/> <ellipse cx="21" cy="24" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M18.9063,23.8438 Q18.9063,25.7188 19.4844,26.7266 Q20.0625,27.7344 21.2188,27.7344 Q22.5625,27.7344 23.2188,25.7188 L25.4844,26.1406 Q24.375,29.6719 21.2031,29.6719 Q18.8594,29.6719 17.6406,28.1875 Q16.4219,26.7031 16.4219,23.8438 Q16.4219,18.125 21.125,18.125 Q22.6719,18.125 23.7109,18.9375 Q24.75,19.75 25.25,21.3594 L22.9844,21.9063 Q22.75,21.0313 22.2656,20.5391 Q21.7813,20.0469 21.1563,20.0469 Q18.9063,20.0469 18.9063,23.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="35" y="28.6553">c1</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="50" y1="40" y2="40"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="50" y1="48" y2="48"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="86" y="8"/> <ellipse cx="101" cy="24" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M98.9063,23.8438 Q98.9063,25.7188 99.4844,26.7266 Q100.0625,27.7344 101.2188,27.7344 Q102.5625,27.7344 103.2188,25.7188 L105.4844,26.1406 Q104.375,29.6719 101.2031,29.6719 Q98.8594,29.6719 97.6406,28.1875 Q96.4219,26.7031 96.4219,23.8438 Q96.4219,18.125 101.125,18.125 Q102.6719,18.125 103.7109,18.9375 Q104.75,19.75 105.25,21.3594 L102.9844,21.9063 Q102.75,21.0313 102.2656,20.5391 Q101.7813,20.0469 101.1563,20.0469 Q98.9063,20.0469 98.9063,23.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="115" y="28.6553">c2</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="87" x2="130" y1="40" y2="40"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="87" x2="130" y1="48" y2="48"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="126" y="116"/> <ellipse cx="141" cy="132" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M138.9063,131.8438 Q138.9063,133.7188 139.4844,134.7266 Q140.0625,135.7344 141.2188,135.7344 Q142.5625,135.7344 143.2188,133.7188 L145.4844,134.1406 Q144.375,137.6719 141.2031,137.6719 Q138.8594,137.6719 137.6406,136.1875 Q136.4219,134.7031 136.4219,131.8438 Q136.4219,126.125 141.125,126.125 Q142.6719,126.125 143.7109,126.9375 Q144.75,127.75 145.25,129.3594 L142.9844,129.9063 Q142.75,129.0313 142.2656,128.5391 Q141.7813,128.0469 141.1563,128.0469 Q138.9063,128.0469 138.9063,131.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="155" y="136.6553">c3</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="127" x2="170" y1="148" y2="148"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="127" x2="170" y1="156" y2="156"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="46" y="116"/> <ellipse cx="61" cy="132" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M58.9063,131.8438 Q58.9063,133.7188 59.4844,134.7266 Q60.0625,135.7344 61.2188,135.7344 Q62.5625,135.7344 63.2188,133.7188 L65.4844,134.1406 Q64.375,137.6719 61.2031,137.6719 Q58.8594,137.6719 57.6406,136.1875 Q56.4219,134.7031 56.4219,131.8438 Q56.4219,126.125 61.125,126.125 Q62.6719,126.125 63.7109,126.9375 Q64.75,127.75 65.25,129.3594 L62.9844,129.9063 Q62.75,129.0313 62.2656,128.5391 Q61.7813,128.0469 61.1563,128.0469 Q58.9063,128.0469 58.9063,131.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="75" y="136.6553">c4</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="47" x2="90" y1="148" y2="148"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="47" x2="90" y1="156" y2="156"/> <path d="M51.3125,32 C61.0776,32 70.8427,32 80.6078,32 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="85.7144,32,76.7144,28,80.7144,32,76.7144,36,85.7144,32" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M117.179,56 C123.27,72.1409 131.449,93.8162 137.922,110.9688 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="139.699,115.6784,140.263,105.8457,137.9333,111.0005,132.7785,108.6708,139.699,115.6784" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M96.419,140 C106.184,140 115.949,140 125.714,140 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="91.3125,140,100.3125,144,96.3125,140,100.3125,136,91.3125,140" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M88.7087,115.6784 C97.3177,99.6037 105.6364,78.1538 109.966,61.131 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="111.177,56,105.2142,63.8387,110.0269,60.8659,112.9997,65.6787,111.177,56" style="stroke: #A80036; stroke-width: 1.0;"/> </g></svg> ' repeated again to place c2 and c4 even closer c2 -[hidden]-> c4 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="173px" style="width:220px;height:173px;" version="1.1" viewBox="0 0 220 173" width="220px"> <defs> <filter height="300%" id="f1" width="300%" x="-1" y="-1"> <feGaussianBlur result="blurOut" stdDeviation="2.0"/> <feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/> <feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/> <feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/> </filter> </defs> <g> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="6" y="8"/> <ellipse cx="21" cy="24" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M18.9063,23.8438 Q18.9063,25.7188 19.4844,26.7266 Q20.0625,27.7344 21.2188,27.7344 Q22.5625,27.7344 23.2188,25.7188 L25.4844,26.1406 Q24.375,29.6719 21.2031,29.6719 Q18.8594,29.6719 17.6406,28.1875 Q16.4219,26.7031 16.4219,23.8438 Q16.4219,18.125 21.125,18.125 Q22.6719,18.125 23.7109,18.9375 Q24.75,19.75 25.25,21.3594 L22.9844,21.9063 Q22.75,21.0313 22.2656,20.5391 Q21.7813,20.0469 21.1563,20.0469 Q18.9063,20.0469 18.9063,23.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="35" y="28.6553">c1</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="50" y1="40" y2="40"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="50" y1="48" y2="48"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="86" y="8"/> <ellipse cx="101" cy="24" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M98.9063,23.8438 Q98.9063,25.7188 99.4844,26.7266 Q100.0625,27.7344 101.2188,27.7344 Q102.5625,27.7344 103.2188,25.7188 L105.4844,26.1406 Q104.375,29.6719 101.2031,29.6719 Q98.8594,29.6719 97.6406,28.1875 Q96.4219,26.7031 96.4219,23.8438 Q96.4219,18.125 101.125,18.125 Q102.6719,18.125 103.7109,18.9375 Q104.75,19.75 105.25,21.3594 L102.9844,21.9063 Q102.75,21.0313 102.2656,20.5391 Q101.7813,20.0469 101.1563,20.0469 Q98.9063,20.0469 98.9063,23.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="115" y="28.6553">c2</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="87" x2="130" y1="40" y2="40"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="87" x2="130" y1="48" y2="48"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="166" y="116"/> <ellipse cx="181" cy="132" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M178.9063,131.8438 Q178.9063,133.7188 179.4844,134.7266 Q180.0625,135.7344 181.2188,135.7344 Q182.5625,135.7344 183.2188,133.7188 L185.4844,134.1406 Q184.375,137.6719 181.2031,137.6719 Q178.8594,137.6719 177.6406,136.1875 Q176.4219,134.7031 176.4219,131.8438 Q176.4219,126.125 181.125,126.125 Q182.6719,126.125 183.7109,126.9375 Q184.75,127.75 185.25,129.3594 L182.9844,129.9063 Q182.75,129.0313 182.2656,128.5391 Q181.7813,128.0469 181.1563,128.0469 Q178.9063,128.0469 178.9063,131.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="195" y="136.6553">c3</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="167" x2="210" y1="148" y2="148"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="167" x2="210" y1="156" y2="156"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="86" y="116"/> <ellipse cx="101" cy="132" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M98.9063,131.8438 Q98.9063,133.7188 99.4844,134.7266 Q100.0625,135.7344 101.2188,135.7344 Q102.5625,135.7344 103.2188,133.7188 L105.4844,134.1406 Q104.375,137.6719 101.2031,137.6719 Q98.8594,137.6719 97.6406,136.1875 Q96.4219,134.7031 96.4219,131.8438 Q96.4219,126.125 101.125,126.125 Q102.6719,126.125 103.7109,126.9375 Q104.75,127.75 105.25,129.3594 L102.9844,129.9063 Q102.75,129.0313 102.2656,128.5391 Q101.7813,128.0469 101.1563,128.0469 Q98.9063,128.0469 98.9063,131.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="115" y="136.6553">c4</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="87" x2="130" y1="148" y2="148"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="87" x2="130" y1="156" y2="156"/> <path d="M51.3125,32 C61.0776,32 70.8427,32 80.6078,32 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="85.7144,32,76.7144,28,80.7144,32,76.7144,36,85.7144,32" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M125.859,56 C138.144,72.2789 154.679,94.1871 167.676,111.4076 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="170.899,115.6784,168.6705,106.085,167.8871,111.6873,162.2848,110.904,170.899,115.6784" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M136.419,140 C146.184,140 155.949,140 165.714,140 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="131.312,140,140.312,144,136.312,140,140.312,136,131.312,140" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M119.908,115.6784 C122.451,99.6037 122.676,78.1538 120.581,61.131 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="119.857,56,117.1535,65.4705,120.5555,60.951,125.0751,64.3529,119.857,56" style="stroke: #A80036; stroke-width: 1.0;"/> </g></svg> Note that although the links are hidden they still affecting the drawing of links on the same path. If you temporarily remove the `[hidden]` option you can see what is going on: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="173px" style="width:220px;height:173px;" version="1.1" viewBox="0 0 220 173" width="220px"> <defs> <filter height="300%" id="f1" width="300%" x="-1" y="-1"> <feGaussianBlur result="blurOut" stdDeviation="2.0"/> <feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/> <feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/> <feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/> </filter> </defs> <g> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="6" y="8"/> <ellipse cx="21" cy="24" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M18.9063,23.8438 Q18.9063,25.7188 19.4844,26.7266 Q20.0625,27.7344 21.2188,27.7344 Q22.5625,27.7344 23.2188,25.7188 L25.4844,26.1406 Q24.375,29.6719 21.2031,29.6719 Q18.8594,29.6719 17.6406,28.1875 Q16.4219,26.7031 16.4219,23.8438 Q16.4219,18.125 21.125,18.125 Q22.6719,18.125 23.7109,18.9375 Q24.75,19.75 25.25,21.3594 L22.9844,21.9063 Q22.75,21.0313 22.2656,20.5391 Q21.7813,20.0469 21.1563,20.0469 Q18.9063,20.0469 18.9063,23.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="35" y="28.6553">c1</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="50" y1="40" y2="40"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="50" y1="48" y2="48"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="86" y="8"/> <ellipse cx="101" cy="24" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M98.9063,23.8438 Q98.9063,25.7188 99.4844,26.7266 Q100.0625,27.7344 101.2188,27.7344 Q102.5625,27.7344 103.2188,25.7188 L105.4844,26.1406 Q104.375,29.6719 101.2031,29.6719 Q98.8594,29.6719 97.6406,28.1875 Q96.4219,26.7031 96.4219,23.8438 Q96.4219,18.125 101.125,18.125 Q102.6719,18.125 103.7109,18.9375 Q104.75,19.75 105.25,21.3594 L102.9844,21.9063 Q102.75,21.0313 102.2656,20.5391 Q101.7813,20.0469 101.1563,20.0469 Q98.9063,20.0469 98.9063,23.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="115" y="28.6553">c2</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="87" x2="130" y1="40" y2="40"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="87" x2="130" y1="48" y2="48"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="166" y="116"/> <ellipse cx="181" cy="132" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M178.9063,131.8438 Q178.9063,133.7188 179.4844,134.7266 Q180.0625,135.7344 181.2188,135.7344 Q182.5625,135.7344 183.2188,133.7188 L185.4844,134.1406 Q184.375,137.6719 181.2031,137.6719 Q178.8594,137.6719 177.6406,136.1875 Q176.4219,134.7031 176.4219,131.8438 Q176.4219,126.125 181.125,126.125 Q182.6719,126.125 183.7109,126.9375 Q184.75,127.75 185.25,129.3594 L182.9844,129.9063 Q182.75,129.0313 182.2656,128.5391 Q181.7813,128.0469 181.1563,128.0469 Q178.9063,128.0469 178.9063,131.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="195" y="136.6553">c3</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="167" x2="210" y1="148" y2="148"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="167" x2="210" y1="156" y2="156"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="86" y="116"/> <ellipse cx="101" cy="132" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M98.9063,131.8438 Q98.9063,133.7188 99.4844,134.7266 Q100.0625,135.7344 101.2188,135.7344 Q102.5625,135.7344 103.2188,133.7188 L105.4844,134.1406 Q104.375,137.6719 101.2031,137.6719 Q98.8594,137.6719 97.6406,136.1875 Q96.4219,134.7031 96.4219,131.8438 Q96.4219,126.125 101.125,126.125 Q102.6719,126.125 103.7109,126.9375 Q104.75,127.75 105.25,129.3594 L102.9844,129.9063 Q102.75,129.0313 102.2656,128.5391 Q101.7813,128.0469 101.1563,128.0469 Q98.9063,128.0469 98.9063,131.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="115" y="136.6553">c4</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="87" x2="130" y1="148" y2="148"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="87" x2="130" y1="156" y2="156"/> <path d="M51.3125,32 C61.0776,32 70.8427,32 80.6078,32 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="85.7144,32,76.7144,28,80.7144,32,76.7144,36,85.7144,32" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M125.859,56 C138.144,72.2789 154.679,94.1871 167.676,111.4076 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="170.899,115.6784,168.6705,106.085,167.8871,111.6873,162.2848,110.904,170.899,115.6784" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M136.419,140 C146.184,140 155.949,140 165.714,140 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="131.312,140,140.312,144,136.312,140,140.312,136,131.312,140" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M119.908,115.6784 C122.451,99.6037 122.676,78.1538 120.581,61.131 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="119.857,56,117.1535,65.4705,120.5555,60.951,125.0751,64.3529,119.857,56" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M108.5,56 C108.5,72.003 108.5,93.4461 108.5,110.528 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="108.5,115.6784,112.5,106.6784,108.5,110.6784,104.5,106.6784,108.5,115.6784" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M97.7741,56 C95.343,72.003 95.1019,93.4461 97.0506,110.528 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="97.7257,115.6784,100.5221,106.2349,97.0759,110.7208,92.5899,107.2746,97.7257,115.6784" style="stroke: #A80036; stroke-width: 1.0;"/> </g></svg> You can fiddle with the ordering and direction to ensure the one that is being drawn is in the place that you want it (usually in the middle). The trick is to use identical links with the same class ordering and direction. If you want the link drawn in the opposite direction you can't flip the order of the classes - you need to swap the placement of the arrow: ' place c2 and c4 closer c2 -[hidden]- c4 ' draw the actual link between the hidden links c2 <-[norank]- c4 ' place c2 and c4 even closer c2 -[hidden]- c4 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="173px" style="width:220px;height:173px;" version="1.1" viewBox="0 0 220 173" width="220px"> <defs> <filter height="300%" id="f1" width="300%" x="-1" y="-1"> <feGaussianBlur result="blurOut" stdDeviation="2.0"/> <feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/> <feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/> <feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/> </filter> </defs> <g> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="6" y="8"/> <ellipse cx="21" cy="24" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M18.9063,23.8438 Q18.9063,25.7188 19.4844,26.7266 Q20.0625,27.7344 21.2188,27.7344 Q22.5625,27.7344 23.2188,25.7188 L25.4844,26.1406 Q24.375,29.6719 21.2031,29.6719 Q18.8594,29.6719 17.6406,28.1875 Q16.4219,26.7031 16.4219,23.8438 Q16.4219,18.125 21.125,18.125 Q22.6719,18.125 23.7109,18.9375 Q24.75,19.75 25.25,21.3594 L22.9844,21.9063 Q22.75,21.0313 22.2656,20.5391 Q21.7813,20.0469 21.1563,20.0469 Q18.9063,20.0469 18.9063,23.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="35" y="28.6553">c1</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="50" y1="40" y2="40"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="50" y1="48" y2="48"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="86" y="8"/> <ellipse cx="101" cy="24" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M98.9063,23.8438 Q98.9063,25.7188 99.4844,26.7266 Q100.0625,27.7344 101.2188,27.7344 Q102.5625,27.7344 103.2188,25.7188 L105.4844,26.1406 Q104.375,29.6719 101.2031,29.6719 Q98.8594,29.6719 97.6406,28.1875 Q96.4219,26.7031 96.4219,23.8438 Q96.4219,18.125 101.125,18.125 Q102.6719,18.125 103.7109,18.9375 Q104.75,19.75 105.25,21.3594 L102.9844,21.9063 Q102.75,21.0313 102.2656,20.5391 Q101.7813,20.0469 101.1563,20.0469 Q98.9063,20.0469 98.9063,23.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="115" y="28.6553">c2</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="87" x2="130" y1="40" y2="40"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="87" x2="130" y1="48" y2="48"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="166" y="116"/> <ellipse cx="181" cy="132" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M178.9063,131.8438 Q178.9063,133.7188 179.4844,134.7266 Q180.0625,135.7344 181.2188,135.7344 Q182.5625,135.7344 183.2188,133.7188 L185.4844,134.1406 Q184.375,137.6719 181.2031,137.6719 Q178.8594,137.6719 177.6406,136.1875 Q176.4219,134.7031 176.4219,131.8438 Q176.4219,126.125 181.125,126.125 Q182.6719,126.125 183.7109,126.9375 Q184.75,127.75 185.25,129.3594 L182.9844,129.9063 Q182.75,129.0313 182.2656,128.5391 Q181.7813,128.0469 181.1563,128.0469 Q178.9063,128.0469 178.9063,131.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="195" y="136.6553">c3</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="167" x2="210" y1="148" y2="148"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="167" x2="210" y1="156" y2="156"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="86" y="116"/> <ellipse cx="101" cy="132" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M98.9063,131.8438 Q98.9063,133.7188 99.4844,134.7266 Q100.0625,135.7344 101.2188,135.7344 Q102.5625,135.7344 103.2188,133.7188 L105.4844,134.1406 Q104.375,137.6719 101.2031,137.6719 Q98.8594,137.6719 97.6406,136.1875 Q96.4219,134.7031 96.4219,131.8438 Q96.4219,126.125 101.125,126.125 Q102.6719,126.125 103.7109,126.9375 Q104.75,127.75 105.25,129.3594 L102.9844,129.9063 Q102.75,129.0313 102.2656,128.5391 Q101.7813,128.0469 101.1563,128.0469 Q98.9063,128.0469 98.9063,131.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="115" y="136.6553">c4</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="87" x2="130" y1="148" y2="148"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="87" x2="130" y1="156" y2="156"/> <path d="M51.3125,32 C61.0776,32 70.8427,32 80.6078,32 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="85.7144,32,76.7144,28,80.7144,32,76.7144,36,85.7144,32" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M125.859,56 C138.144,72.2789 154.679,94.1871 167.676,111.4076 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="170.899,115.6784,168.6705,106.085,167.8871,111.6873,162.2848,110.904,170.899,115.6784" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M136.419,140 C146.184,140 155.949,140 165.714,140 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="131.312,140,140.312,144,136.312,140,140.312,136,131.312,140" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M108.5,61.131 C108.5,78.1538 108.5,99.6037 108.5,115.6784 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="108.5,56,104.5,65,108.5,61,112.5,65,108.5,56" style="stroke: #A80036; stroke-width: 1.0;"/> </g></svg> ### General Layout Tips Understanding how the layout engine works (GraphVis) makes it easier to get what you want. The previous example with the `[hidden]` and `[norank]` links got weird because we were giving the layout engine conflicting information. The layout is determined by the order that classes occur. Classes are drawn at the top of the document have higher ranking than those below. The rank is determined by: - The order in which classes are added to the diagram - The layout hints (horizontal, vertical, left, right, up, down) - The direction in which the links are defined. The class on the left has higher rank than the one on the right: `higher -> lower` Link direction can have a dramatic impact. If we add a `c4 --> c2` link we confuse the engine by having `c4` on the left which gives it a higher ranking than `c2` and causes the diagram to flip upside down: class c1 c1 -> c2 c2 --> c3 c3 -left-> c4 ' whoops, this flips the diagram on its head c4 --> c2 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="173px" style="width:180px;height:173px;" version="1.1" viewBox="0 0 180 173" width="180px"> <defs> <filter height="300%" id="f1" width="300%" x="-1" y="-1"> <feGaussianBlur result="blurOut" stdDeviation="2.0"/> <feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/> <feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/> <feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/> </filter> </defs> <g> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="6" y="116"/> <ellipse cx="21" cy="132" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M18.9063,131.8438 Q18.9063,133.7188 19.4844,134.7266 Q20.0625,135.7344 21.2188,135.7344 Q22.5625,135.7344 23.2188,133.7188 L25.4844,134.1406 Q24.375,137.6719 21.2031,137.6719 Q18.8594,137.6719 17.6406,136.1875 Q16.4219,134.7031 16.4219,131.8438 Q16.4219,126.125 21.125,126.125 Q22.6719,126.125 23.7109,126.9375 Q24.75,127.75 25.25,129.3594 L22.9844,129.9063 Q22.75,129.0313 22.2656,128.5391 Q21.7813,128.0469 21.1563,128.0469 Q18.9063,128.0469 18.9063,131.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="35" y="136.6553">c1</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="50" y1="148" y2="148"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="50" y1="156" y2="156"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="86" y="116"/> <ellipse cx="101" cy="132" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M98.9063,131.8438 Q98.9063,133.7188 99.4844,134.7266 Q100.0625,135.7344 101.2188,135.7344 Q102.5625,135.7344 103.2188,133.7188 L105.4844,134.1406 Q104.375,137.6719 101.2031,137.6719 Q98.8594,137.6719 97.6406,136.1875 Q96.4219,134.7031 96.4219,131.8438 Q96.4219,126.125 101.125,126.125 Q102.6719,126.125 103.7109,126.9375 Q104.75,127.75 105.25,129.3594 L102.9844,129.9063 Q102.75,129.0313 102.2656,128.5391 Q101.7813,128.0469 101.1563,128.0469 Q98.9063,128.0469 98.9063,131.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="115" y="136.6553">c2</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="87" x2="130" y1="148" y2="148"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="87" x2="130" y1="156" y2="156"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="126" y="8"/> <ellipse cx="141" cy="24" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M138.9063,23.8438 Q138.9063,25.7188 139.4844,26.7266 Q140.0625,27.7344 141.2188,27.7344 Q142.5625,27.7344 143.2188,25.7188 L145.4844,26.1406 Q144.375,29.6719 141.2031,29.6719 Q138.8594,29.6719 137.6406,28.1875 Q136.4219,26.7031 136.4219,23.8438 Q136.4219,18.125 141.125,18.125 Q142.6719,18.125 143.7109,18.9375 Q144.75,19.75 145.25,21.3594 L142.9844,21.9063 Q142.75,21.0313 142.2656,20.5391 Q141.7813,20.0469 141.1563,20.0469 Q138.9063,20.0469 138.9063,23.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="155" y="28.6553">c3</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="127" x2="170" y1="40" y2="40"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="127" x2="170" y1="48" y2="48"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="46" y="8"/> <ellipse cx="61" cy="24" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M58.9063,23.8438 Q58.9063,25.7188 59.4844,26.7266 Q60.0625,27.7344 61.2188,27.7344 Q62.5625,27.7344 63.2188,25.7188 L65.4844,26.1406 Q64.375,29.6719 61.2031,29.6719 Q58.8594,29.6719 57.6406,28.1875 Q56.4219,26.7031 56.4219,23.8438 Q56.4219,18.125 61.125,18.125 Q62.6719,18.125 63.7109,18.9375 Q64.75,19.75 65.25,21.3594 L62.9844,21.9063 Q62.75,21.0313 62.2656,20.5391 Q61.7813,20.0469 61.1563,20.0469 Q58.9063,20.0469 58.9063,23.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="75" y="28.6553">c4</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="47" x2="90" y1="40" y2="40"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="47" x2="90" y1="48" y2="48"/> <path d="M51.3125,140 C61.0776,140 70.8427,140 80.6078,140 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="85.7144,140,76.7144,136,80.7144,140,76.7144,144,85.7144,140" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M117.301,115.6784 C123.419,99.4651 131.601,77.7836 138.05,60.691 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="139.821,56,132.9027,63.0098,138.0568,60.6784,140.3881,65.8325,139.821,56" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M96.419,32 C106.184,32 115.949,32 125.714,32 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="91.3125,32,100.3125,36,96.3125,32,100.3125,28,91.3125,32" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M78.9495,60.691 C85.3995,77.7836 93.5812,99.4651 99.6994,115.6784 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="77.1794,56,76.6126,65.8325,78.9438,60.6784,84.0979,63.0095,77.1794,56" style="stroke: #A80036; stroke-width: 1.0;"/> </g></svg> Drawing links from the top down prevents this re-ranking problem, and means you don't have to use `[norank]` as often. Since the arrow direction has no effect on the layout we can just flip the end that the arrow is drawn at to account for the link being in a different order: ' ranking maintained, so layout isn't dramatically affected ' arrow drawn at opposite end to account for reverse order c2 <-- c4 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="173px" style="width:180px;height:173px;" version="1.1" viewBox="0 0 180 173" width="180px"> <defs> <filter height="300%" id="f1" width="300%" x="-1" y="-1"> <feGaussianBlur result="blurOut" stdDeviation="2.0"/> <feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/> <feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/> <feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/> </filter> </defs> <g> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="6" y="8"/> <ellipse cx="21" cy="24" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M18.9063,23.8438 Q18.9063,25.7188 19.4844,26.7266 Q20.0625,27.7344 21.2188,27.7344 Q22.5625,27.7344 23.2188,25.7188 L25.4844,26.1406 Q24.375,29.6719 21.2031,29.6719 Q18.8594,29.6719 17.6406,28.1875 Q16.4219,26.7031 16.4219,23.8438 Q16.4219,18.125 21.125,18.125 Q22.6719,18.125 23.7109,18.9375 Q24.75,19.75 25.25,21.3594 L22.9844,21.9063 Q22.75,21.0313 22.2656,20.5391 Q21.7813,20.0469 21.1563,20.0469 Q18.9063,20.0469 18.9063,23.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="35" y="28.6553">c1</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="50" y1="40" y2="40"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="50" y1="48" y2="48"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="86" y="8"/> <ellipse cx="101" cy="24" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M98.9063,23.8438 Q98.9063,25.7188 99.4844,26.7266 Q100.0625,27.7344 101.2188,27.7344 Q102.5625,27.7344 103.2188,25.7188 L105.4844,26.1406 Q104.375,29.6719 101.2031,29.6719 Q98.8594,29.6719 97.6406,28.1875 Q96.4219,26.7031 96.4219,23.8438 Q96.4219,18.125 101.125,18.125 Q102.6719,18.125 103.7109,18.9375 Q104.75,19.75 105.25,21.3594 L102.9844,21.9063 Q102.75,21.0313 102.2656,20.5391 Q101.7813,20.0469 101.1563,20.0469 Q98.9063,20.0469 98.9063,23.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="115" y="28.6553">c2</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="87" x2="130" y1="40" y2="40"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="87" x2="130" y1="48" y2="48"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="126" y="116"/> <ellipse cx="141" cy="132" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M138.9063,131.8438 Q138.9063,133.7188 139.4844,134.7266 Q140.0625,135.7344 141.2188,135.7344 Q142.5625,135.7344 143.2188,133.7188 L145.4844,134.1406 Q144.375,137.6719 141.2031,137.6719 Q138.8594,137.6719 137.6406,136.1875 Q136.4219,134.7031 136.4219,131.8438 Q136.4219,126.125 141.125,126.125 Q142.6719,126.125 143.7109,126.9375 Q144.75,127.75 145.25,129.3594 L142.9844,129.9063 Q142.75,129.0313 142.2656,128.5391 Q141.7813,128.0469 141.1563,128.0469 Q138.9063,128.0469 138.9063,131.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="155" y="136.6553">c3</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="127" x2="170" y1="148" y2="148"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="127" x2="170" y1="156" y2="156"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="46" y="116"/> <ellipse cx="61" cy="132" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M58.9063,131.8438 Q58.9063,133.7188 59.4844,134.7266 Q60.0625,135.7344 61.2188,135.7344 Q62.5625,135.7344 63.2188,133.7188 L65.4844,134.1406 Q64.375,137.6719 61.2031,137.6719 Q58.8594,137.6719 57.6406,136.1875 Q56.4219,134.7031 56.4219,131.8438 Q56.4219,126.125 61.125,126.125 Q62.6719,126.125 63.7109,126.9375 Q64.75,127.75 65.25,129.3594 L62.9844,129.9063 Q62.75,129.0313 62.2656,128.5391 Q61.7813,128.0469 61.1563,128.0469 Q58.9063,128.0469 58.9063,131.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="75" y="136.6553">c4</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="47" x2="90" y1="148" y2="148"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="47" x2="90" y1="156" y2="156"/> <path d="M51.3125,32 C61.0776,32 70.8427,32 80.6078,32 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="85.7144,32,76.7144,28,80.7144,32,76.7144,36,85.7144,32" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M117.179,56 C123.27,72.1409 131.449,93.8162 137.922,110.9688 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="139.699,115.6784,140.263,105.8457,137.9333,111.0005,132.7785,108.6708,139.699,115.6784" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M96.419,140 C106.184,140 115.949,140 125.714,140 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="91.3125,140,100.3125,144,96.3125,140,100.3125,136,91.3125,140" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M98.0505,60.691 C91.6005,77.7836 83.4188,99.4651 77.3006,115.6784 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="99.8206,56,92.9021,63.0095,98.0562,60.6784,100.3874,65.8325,99.8206,56" style="stroke: #A80036; stroke-width: 1.0;"/> </g></svg> We could have also used the `up` layout hint to prevent the re-ranking: c4 -up-> c2 ## Layout Direction You can change the ranking direction from vertical to horizontal using `left to right direction`: left to right direction class c1 c1 -> c2 c2 --> c3 c3 -left-> c4 c2 <-- c4 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="189px" style="width:165px;height:189px;" version="1.1" viewBox="0 0 165 189" width="165px"> <defs> <filter height="300%" id="f1" width="300%" x="-1" y="-1"> <feGaussianBlur result="blurOut" stdDeviation="2.0"/> <feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/> <feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/> <feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/> </filter> </defs> <g> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="6" y="8"/> <ellipse cx="21" cy="24" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M18.9063,23.8438 Q18.9063,25.7188 19.4844,26.7266 Q20.0625,27.7344 21.2188,27.7344 Q22.5625,27.7344 23.2188,25.7188 L25.4844,26.1406 Q24.375,29.6719 21.2031,29.6719 Q18.8594,29.6719 17.6406,28.1875 Q16.4219,26.7031 16.4219,23.8438 Q16.4219,18.125 21.125,18.125 Q22.6719,18.125 23.7109,18.9375 Q24.75,19.75 25.25,21.3594 L22.9844,21.9063 Q22.75,21.0313 22.2656,20.5391 Q21.7813,20.0469 21.1563,20.0469 Q18.9063,20.0469 18.9063,23.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="35" y="28.6553">c1</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="50" y1="40" y2="40"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="50" y1="48" y2="48"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="6" y="91"/> <ellipse cx="21" cy="107" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M18.9063,106.8438 Q18.9063,108.7188 19.4844,109.7266 Q20.0625,110.7344 21.2188,110.7344 Q22.5625,110.7344 23.2188,108.7188 L25.4844,109.1406 Q24.375,112.6719 21.2031,112.6719 Q18.8594,112.6719 17.6406,111.1875 Q16.4219,109.7031 16.4219,106.8438 Q16.4219,101.125 21.125,101.125 Q22.6719,101.125 23.7109,101.9375 Q24.75,102.75 25.25,104.3594 L22.9844,104.9063 Q22.75,104.0313 22.2656,103.5391 Q21.7813,103.0469 21.1563,103.0469 Q18.9063,103.0469 18.9063,106.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="35" y="111.6553">c2</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="50" y1="123" y2="123"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="50" y1="131" y2="131"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="111" y="132"/> <ellipse cx="126" cy="148" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M123.9063,147.8438 Q123.9063,149.7188 124.4844,150.7266 Q125.0625,151.7344 126.2188,151.7344 Q127.5625,151.7344 128.2188,149.7188 L130.4844,150.1406 Q129.375,153.6719 126.2031,153.6719 Q123.8594,153.6719 122.6406,152.1875 Q121.4219,150.7031 121.4219,147.8438 Q121.4219,142.125 126.125,142.125 Q127.6719,142.125 128.7109,142.9375 Q129.75,143.75 130.25,145.3594 L127.9844,145.9063 Q127.75,145.0313 127.2656,144.5391 Q126.7813,144.0469 126.1563,144.0469 Q123.9063,144.0469 123.9063,147.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="140" y="152.6553">c3</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="112" x2="155" y1="164" y2="164"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="112" x2="155" y1="172" y2="172"/> <rect fill="#FEFECE" filter="url(#f1)" height="48" style="stroke: #A80036; stroke-width: 1.5;" width="45" x="111" y="49"/> <ellipse cx="126" cy="65" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M123.9063,64.8438 Q123.9063,66.7188 124.4844,67.7266 Q125.0625,68.7344 126.2188,68.7344 Q127.5625,68.7344 128.2188,66.7188 L130.4844,67.1406 Q129.375,70.6719 126.2031,70.6719 Q123.8594,70.6719 122.6406,69.1875 Q121.4219,67.7031 121.4219,64.8438 Q121.4219,59.125 126.125,59.125 Q127.6719,59.125 128.7109,59.9375 Q129.75,60.75 130.25,62.3594 L127.9844,62.9063 Q127.75,62.0313 127.2656,61.5391 Q126.7813,61.0469 126.1563,61.0469 Q123.9063,61.0469 123.9063,64.8438 Z "/> <text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="13" x="140" y="69.6553">c4</text> <line style="stroke: #A80036; stroke-width: 1.5;" x1="112" x2="155" y1="81" y2="81"/> <line style="stroke: #A80036; stroke-width: 1.5;" x1="112" x2="155" y1="89" y2="89"/> <path d="M28.5,56.299 C28.5,66.059 28.5,75.819 28.5,85.5796 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="28.5,90.6836,32.5,81.6836,28.5,85.6836,24.5,81.6836,28.5,90.6836" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M51.3437,123.695 C67.321,130.0549 89.0751,138.7144 106.039,145.467 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="110.688,147.3175,103.8063,140.2718,106.0427,145.4678,100.8467,147.7042,110.688,147.3175" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M133.5,102.4027 C133.5,112.163 133.5,121.9233 133.5,131.6836 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="133.5,97.2987,129.5,106.2987,133.5,102.2987,137.5,106.2987,133.5,97.2987" style="stroke: #A80036; stroke-width: 1.0;"/> <path d="M55.9945,104.1964 C72.9646,97.2766 94.7181,88.4062 110.688,81.8943 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/> <polygon fill="#A80036" points="51.3437,106.0929,61.1878,106.3985,55.9736,104.205,58.1671,98.9907,51.3437,106.0929" style="stroke: #A80036; stroke-width: 1.0;"/> </g></svg> This also changes the meaning of the layout hints. Horizontal hints become vertical, etc. ## Spacing You can control the spacing between class using the `NodeSep` and `RankSep` skinparams. SkinParam { NodeSep 45 ' horizontal spacing RankSep 45 ' vertical spacing }

Ignore Space Show notes View

plantuml/class-diagram-tips.md

## Controlling Class Layout
Layout is determined dymanically, so can be tricky if you are trying to get a specific layout, but you can usually beat it into submission with a combination of the following:

' force class diagram mode
    class c1
     
    ' horizontal placement
    c1 -> c2
     
    ' vertical placement
    c2 --> c3
     
    ' left placement
    c4 -left-> c4

You can use `left`, `right`, `up`, and `down` to control placement direction.

If adding a link screws up the class placement you can use `[norank]` to exclude the link from the layout process:

' link will not affect class placement
    c4 -[norank]-> c2

You can also use `[hidden]` to create invisible links solely for the purpose of influencing the layout.  Repeating them will increase the likelihood that the classes will be placed closer and even be aligned with each other:

' place c2 and c4 closer together
    c2 -[hidden]-> c4 
     
    ' repeated again to place c2 and c4 even closer
    c2 -[hidden]-> c4

Note that although the links are hidden they still affecting the drawing of links on the same path.  If you temporarily remove the `[hidden]` option you can see what is going on.

You can fiddle with the ordering and direction to ensure the one that is being drawn is in the place that you want it (usually in the middle).  The trick is to use identical links with the same class ordering and direction.  If you want the link drawn in the opposite direction you can't flip the order of the classes - you need to swap the placement of the arrow:

' place c2 and c4 closer
    c2 -[hidden]- c4
           
    ' draw the actual link between the hidden links
    c2 <-[norank]- c4
        
    ' place c2 and c4 even closer
    c2 -[hidden]- c4

### General Layout Tips

Understanding how the layout engine works (GraphVis) makes it easier to get what you want.  The previous example with the `[hidden]` and `[norank]` links got weird because we were giving the layout engine conflicting information.

The layout is determined by the order that classes occur.  Classes are drawn at the top of the document have higher ranking than those below.

The rank is determined by:

* The order in which classes are added to the diagram
* The layout hints (horizontal, vertical, left, right, up, down)
* The direction in which the links are defined.  The class on the left has higher rank than the one on the right: `higher -> lower`

Link direction can have a dramatic impact. If we add a `c4 --> c2` link we confuse the engine by having `c4` on the left which gives it a higher ranking than `c2` and causes the diagram to flip upside down:

class c1 
    c1 -> c2
    c2 --> c3
    c3 -left-> c4
     
    ' whoops, this flips the diagram on its head
    c4 --> c2

Drawing links from the top down prevents this re-ranking problem, and means you don't have to use `[norank]` as often.  Since the arrow direction has no effect on the layout we can just flip the end that the arrow is drawn at to account for the link being in a different order:

' ranking maintained, so layout isn't dramatically affected
    ' arrow drawn at opposite end to account for reverse order
    c2 <-- c4

We could have also used the `up` layout hint to prevent the re-ranking:

c4 -up-> c2

## Layout Direction

You can change the ranking direction from vertical to horizontal using `left to right direction`:

left to right direction
    class c1
    c1 -> c2
    c2 --> c3
    c3 -left-> c4
    c2 <-- c4

This also changes the meaning of the layout hints.  Horizontal hints become vertical, etc.

## Spacing

You can control the spacing between class using the `NodeSep` and `RankSep` skinparams.

SkinParam {
    	NodeSep 45 ' horizontal spacing
        RankSep 45 ' vertical spacing
    }

class1 -> class2 ' horizontal placement
	class2 --> class3 ' vertical placement
	class4 -left-> class4 ' left placement

You can use `left` , `right`, `up`, and `down` to control placement direction.

If adding a link screws up the class placement you can use `[norank]` to exclude the link from the layout process:

' link will not affect class placement
	c4 -[norank]-> c2

' place c2 and c4 closer together
	c2 -[hidden]-> c4

' repeated again to place c2 and c4 even closer
    c2 -[hidden]-> c4

Note that although the links are hidden they still affecting the drawing of links on the same path.  If you temporarily remove the `[hidden]` option you can see what is going on:

' place c2 and c4 closer
	c2 -[hidden]- c4
	
	' draw the actual link between the hidden links
	c2 <-[norank]- c4
	
	' place c2 and c4 even closer
	c2 -[hidden]- c4

### General Layout Tips

The layout is determined by the order that classes occur.  Classes are drawn at the top of the document have higher ranking than those below.

The rank is determined by:

- The order in which classes are added to the diagram
- The layout hints (horizontal, vertical, left, right, up, down)
- The direction in which the links are defined.  The class on the left has higher rank than the one on the right: `higher -> lower`

class c1 
	c1 -> c2
	c2 --> c3
	c3 -left-> c4
	
	' whoops, this flips the diagram on its head
	c4 --> c2

' ranking maintained, so layout isn't dramatically affected
	' arrow drawn at opposite end to account for reverse order
	c2 <-- c4