Differences

This shows you the differences between two versions of the page.

--- en:rule:horizontal_diagram [2023-09-13 13:34] – Anatoly Belaychuk
+++ en:rule:horizontal_diagram [2024-08-22 21:28] (current) – [See also] Anatoly Belaychuk
@@ Line 1: / Line 1: @@
-====== Arrange the diagram horizontally ======
+====== Arrange diagrams horizontally ======
-{{tag>pool}}
+{{tag>pool lane visual_style}}
-{{en:underconstruction.png?nolink&200|}}
 Although BPMN spec allows both horizontal and vertical orientation the horizontal style should be preferred.
@@ Line 9: / Line 7: @@
 ===== ✔ How to =====
-<diagram><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="482px" height="452px" viewBox="-0.5 -0.5 482 452" content="&lt;mxfile host=&quot;embed.diagrams.net&quot; modified=&quot;2023-09-13T10:32:52.281Z&quot; agent=&quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36&quot; version=&quot;21.7.5&quot; etag=&quot;kB4ylNRjKXwWepIjPPZO&quot; type=&quot;embed&quot;&gt;&lt;diagram id=&quot;RC1PRory43eYjQxuC9jh&quot; name=&quot;Страница — 1&quot;&gt;7Vpdc+o2EP01PDaDbb7yeCFJO9PcNjPpTJ+FLWwV2euRRYD767uyJX9JEOaWkISGYQbreCVZu0dHK+FBsEh3vwqSJ98honzgD6PdILgb+L43DAL8Uci+QibDYQXEgkXaqAGe2Q9qamp0wyJadAwlAJcs74IhZBkNZQcjQsC2a7YC3u01JzG1gOeQcBv9m0UyqdCZP23w3yiLE9OzN7mt7qTEGOuRFAmJYNuCgvtBsBAAsrpKdwvKlfOMX6p6Dwfu1g8maCZPqeBXFV4I3+ixPQkIaVEgmJGU6qeUezP0YstSTjIszROZcgQ9vCwkEVLHCXsM5ivI5LOupcohcE7ygi1rJAHBfqAVqdvQLT8y1bpuVsC6drHfMnpgnC+AgyifKliVH7y/TZikzzkJVRNbZB9ieohUSLo76Cavdj6ylkJKpdijia4QjHRoNWFvdfi2TfRHM40lrciPxhokmnFx3XQTFLzQcXHHaGzHiIoViJQKhL33C1HZSisQGZSd/nQMfHcMtM992+fexOXz4Aw+N05vuZVGqAG6CEImEENG+H2DzgVssohG2jONzSNArj34D5Vyr6NANhK6MaJZ9E3JExaXHMJ1BSmuNwa68m3tVPVcB11qhgEbEWorLUVIh5ga8g/dnheUE8leus3/F7feWlS23JwDy2TZxXiO3+GNN8JBLOrfwRitFuWdqtzFZmO3tVei/RaMtf7tte31MPMklnW3bfziVElIrkaU7mK1Bt4s8zS7oS9lYNohV1OC4crySJaUP0HBJINMxR+khBQNuLoxJ+E6LunlEj3TxjfOYlVXKrrNiS6F2CcqRTDPqWAYMXV9h2HBxZI+NdAcNpLjvF7Ua6YiMSnyqrBiO8VsY4UICkoWEaHAYp8uQY0ophkVSi5Om/Djo6I7Hnc0N7Dn/9gx/c+huCbPaPH0L1KsnWpr8dV30dKFTW2wYqn/OnUrbNpn7dRFWxfmO0Bnk65p03vIw3yXymnuBUEgrYya1ro5Lypx84bdSRKqRQhZJ4wM7nLk3sF1S3X7nYh1aU+WmEUQxeFzcNIsQnuT2TkWJd/BytkZWDk5mgfYSnpteYCpMOnG4KJ5gTe5jrzADKOVF3iBIzEYXSgxMJ3bintChvCluJ9acScfVnG92fXO9pFjtk8vNdvtfUAGTleXaXHXPVZe209/UxZFVSQosps0LO0Kx90xfuqTI115ULOwc2QwO0pc3C945qDrZA/q1p7Uk7ZMYLUqMEp9F9ednub1keX1P38fBA+nCmxfJY9p7CmKWttaonpQP19Ty8PCGBNJt2Tvf4jdl0ggXW6KV3dfzWZLp1T1RkuXz6CvvV3WRbdZU4uQf4CiPdLy61jgkx4L0KxzIoCNpCzDyee/CV2D0eXoOrPY2t5/BRZlr3T/FfjvuP/ybTd/yozMJJatjMz4sZ2RHQrF2TMy07m9/7Id/rX/uq791/E0tj/bvbE93d9q/2X+HuhmrF+pwf81NTjO1HdMDcyk+OzLkjlsax8UOJal6rTuEsuS/X/L1fjVcQDTegXkjf1qHwXsaeH09Uc+gXnlrY1fUGIns64oDN7tPAaLzXs9lXnzdlRw/y8=&lt;/diagram&gt;&lt;/mxfile&gt;"><defs/><g><path d="M 1 21 L 1 1 L 481 1 L 481 21" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/><path d="M 1 21 L 1 451 L 481 451 L 481 21" fill="#ffffff" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/><path d="M 1 21 L 481 21" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 478px; height: 1px; padding-top: 11px; margin-left: 2px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Process name</div></div></div></foreignObject><text x="241" y="15" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Process name</text></switch></g><path d="M 1 41 L 1 21 L 161 21 L 161 41" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 1 41 L 1 451 L 161 451 L 161 41" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 31px; margin-left: 2px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Performer 1</div></div></div></foreignObject><text x="81" y="35" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Performer 1</text></switch></g><path d="M 81 101 L 81 121 L 81 111 L 81 119.88" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 81 129.88 L 76 119.88 L 86 119.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><ellipse cx="81" cy="76" rx="25" ry="25" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><path d="M 21 141 C 21 135.48 25.48 131 31 131 L 131 131 C 136.52 131 141 135.48 141 141 L 141 201 C 141 206.52 136.52 211 131 211 L 31 211 C 25.48 211 21 206.52 21 201 L 21 141 Z" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 23 142 L 23 200 C 23 204.97 27.03 209 32 209 L 130 209 C 134.97 209 139 204.97 139 200 L 139 142 C 139 137.03 134.97 133 130 133 L 32 133 C 27.03 133 23 137.03 23 142" fill="none" stroke="none" pointer-events="all"/><path d="M 21 141 C 21 135.48 25.48 131 31 131 L 131 131 C 136.52 131 141 135.48 141 141 L 141 201 C 141 206.52 136.52 211 131 211 L 31 211 C 25.48 211 21 206.52 21 201 L 21 141 Z" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 171px; margin-left: 22px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Task 1</div></div></div></foreignObject><text x="81" y="175" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Task 1</text></switch></g><path d="M 161 41 L 161 21 L 321 21 L 321 41" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 161 41 L 161 451 L 321 451 L 321 41" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 31px; margin-left: 162px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Performer 2</div></div></div></foreignObject><text x="241" y="35" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Performer 2</text></switch></g><path d="M 241 211 L 241 239.88" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 241 249.88 L 236 239.88 L 246 239.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 181 141 C 181 135.48 185.48 131 191 131 L 291 131 C 296.52 131 301 135.48 301 141 L 301 201 C 301 206.52 296.52 211 291 211 L 191 211 C 185.48 211 181 206.52 181 201 L 181 141 Z" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 183 142 L 183 200 C 183 204.97 187.03 209 192 209 L 290 209 C 294.97 209 299 204.97 299 200 L 299 142 C 299 137.03 294.97 133 290 133 L 192 133 C 187.03 133 183 137.03 183 142" fill="none" stroke="none" pointer-events="all"/><path d="M 181 141 C 181 135.48 185.48 131 191 131 L 291 131 C 296.52 131 301 135.48 301 141 L 301 201 C 301 206.52 296.52 211 291 211 L 191 211 C 185.48 211 181 206.52 181 201 L 181 141 Z" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 171px; margin-left: 182px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Task 2</div></div></div></foreignObject><text x="241" y="175" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Task 2</text></switch></g><path d="M 241 301 L 241 349.88" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 241 359.88 L 236 349.88 L 246 349.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 335px; margin-left: 242px;"><div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">no</div></div></div></foreignObject><text x="242" y="338" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">no</text></switch></g><path d="M 241 251 L 266 276 L 241 301 L 216 276 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 308px; margin-left: 241px;"><div data-drawio-colors="color: rgb(0, 0, 0); background-color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">OK?</div></div></div></foreignObject><text x="241" y="320" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">OK?</text></switch></g><ellipse cx="241" cy="386" rx="25" ry="25" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="3" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 418px; margin-left: 241px;"><div data-drawio-colors="color: rgb(0, 0, 0); background-color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">Not OK</div></div></div></foreignObject><text x="241" y="430" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Not OK</text></switch></g><path d="M 321 41 L 321 21 L 481 21 L 481 41" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 321 41 L 321 451 L 481 451 L 481 41" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 31px; margin-left: 322px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Performer 3</div></div></div></foreignObject><text x="401" y="35" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Performer 3</text></switch></g><path d="M 401 316 L 401 349.88" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 401 359.88 L 396 349.88 L 406 349.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 341 246 C 341 240.48 345.48 236 351 236 L 451 236 C 456.52 236 461 240.48 461 246 L 461 306 C 461 311.52 456.52 316 451 316 L 351 316 C 345.48 316 341 311.52 341 306 L 341 246 Z" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 343 247 L 343 305 C 343 309.97 347.03 314 352 314 L 450 314 C 454.97 314 459 309.97 459 305 L 459 247 C 459 242.03 454.97 238 450 238 L 352 238 C 347.03 238 343 242.03 343 247" fill="none" stroke="none" pointer-events="all"/><path d="M 341 246 C 341 240.48 345.48 236 351 236 L 451 236 C 456.52 236 461 240.48 461 246 L 461 306 C 461 311.52 456.52 316 451 316 L 351 316 C 345.48 316 341 311.52 341 306 L 341 246 Z" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 276px; margin-left: 342px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Task 3</div></div></div></foreignObject><text x="401" y="280" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Task 3</text></switch></g><ellipse cx="401" cy="386" rx="25" ry="25" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="3" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 418px; margin-left: 401px;"><div data-drawio-colors="color: rgb(0, 0, 0); background-color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">OK</div></div></div></foreignObject><text x="401" y="430" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">OK</text></switch></g><path d="M 141 171 L 169.88 171" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 179.88 171 L 169.88 176 L 169.88 166 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 266 276 L 329.88 276" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 339.88 276 L 329.88 281 L 329.88 271 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 274px; margin-left: 283px;"><div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">yes</div></div></div></foreignObject><text x="283" y="277" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">yes</text></switch></g></g></svg></diagram>
+<diagram><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="512px" height="362px" viewBox="-0.5 -0.5 512 362" content="&lt;mxfile host=&quot;embed.diagrams.net&quot; modified=&quot;2023-09-13T10:40:40.242Z&quot; agent=&quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36&quot; etag=&quot;MH34RFEv8GSAKhBmX4w3&quot; version=&quot;21.7.5&quot; type=&quot;embed&quot;&gt;&lt;diagram id=&quot;RC1PRory43eYjQxuC9jh&quot; name=&quot;Страница — 1&quot;&gt;7VrbbuM2EP0avwaW5Ovj2klaoNk2QAr0mZZoiTWlESg6tvfrO5RI3UglbteI190EBiweDUnpzOHRUPEoWKfHXwTJk68QUT7yx9FxFNyPfN8bBwF+KeRUIbPxuAJiwSId1AAv7Bs1PTW6ZxEtOoESgEuWd8EQsoyGsoMRIeDQDdsC786ak5hawEtIuI3+xSKZVOjCnzf4r5TFiZnZmy2rMykxwfpOioREcGhBwcMoWAsAWR2lxzXlijzDS9XvceBsfWGCZvKcDv6s6vFK+F7f3LOAkBYFghlJqb5MeTL3XhxYykmGrVUiU46gh4eFJELqROGUwWoLmXzRvVQ7BM5JXrBNjSQg2DeMIlwDZuQnpkavhtXQI+N8DRxEeQ3BtvwrpxWwq3OA7K0OCZP0JSehGuKA8kNM3yIVkh4HefJq9lG2FFIqxQlDjoYnnbC+Yg9N/qdGnkkr94HpSLTm4nrsJi14oDMzkKW5nSUqtiBSKhD2rpekcpRWcjIoJ/3PWaj0OJwGm/XJ0sG651+A9aVFusVzDiyT5RTTFX7Gd95kOvLX9fdoilHr8kzV7mKLqTvaK9H+CCZaf/fG9nqYuRIrujs2fjCpCcnVHaXHWBn23SZPszv6WmalLSCVPIY2+EQ2lD9DwSSDDM9tQEpIMYCrEysS7mIB+yxyLVkzxhfOYtVXghIH0a0Q50RNB6ucCoYZU8f3mBZ0dvrcQCvYS44KXNcGr4RIirxqbNmRRk0UIij9LCJCgcUp3YC6o5hmVChhrxw6nA/IdVCak65BBFPbHxxCnV5Ap8Z2WkL9kxQ7pzFYgvVdunRhcxusZOq/r90Km/dlO3fp1oX5DtA5pGvd9C5yWPBSkeb2LoG6MkZZKruUV1FZqTfurpJQ+SXKTug2PeYovkGLVdN+JWJXxpMNPtKIEvFFROkFXVU6/LO2yrYsF5d4aE0t9dEIyyjdBCETiCEj/KFBVzW5JTVNzBMomyjp/JtKedJPMbKX0CWfZtEXVeEpV+IQ7ipI1Q9NgO68fJPkAvYipJ0nAT4+Yyq7i07d0puZEJQTyV67leN38bp4sxiwH1L/92Lg1BPyhxQHXjBkumdUCZ+me0OmuxjQ6g9put7EkuUfv42Cx3M12RfWW7I8R4R1rKXDQcm9J7BhLcVE0gM5+T9E0SoSSDf74t2italRtV3W9aluX0KS/vJ61ensNsuAhV0GGM/v1AGTa9UBnv1S4HeQCOCC/9yn3ug+lWadLSoOkrIMbc2/kBFMvOsZwcKS5c0awcRhBPOrGYH9oioDJ9fleujyYwm6r/uURVGVCoqlF2lKqK6n3DvJ84YEWr+b1wOO2q+/XcJFo/DMvw3OZlCP9qyutBUC222BaetTXE96FuuBb7He3oYFVgJ+km1Y/SLsQ7ZhZgx7G2Yn4HMbdsPbsHq5nV/zTqddYX7kuy/bHD6rsp+lKvv3Ur1iVebbPnkLVZnhuF2VmcXcrsrMQrxCVXajr79nNrGeg1izF/54YgN733uixTXIdjJwBp2O3cNQ9fu97GGz+TFJVeU2P8kJHv4B&lt;/diagram&gt;&lt;/mxfile&gt;"><defs/><g><path d="M 21 1 L 1 1 L 1 361 L 21 361" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/><path d="M 21 1 L 511 1 L 511 361 L 21 361" fill="#ffffff" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/><path d="M 21 1 L 21 361" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)rotate(-90 11 181)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 358px; height: 1px; padding-top: 181px; margin-left: -168px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Process name</div></div></div></foreignObject><text x="11" y="185" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Process name</text></switch></g><path d="M 41 1 L 21 1 L 21 121 L 41 121" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 41 1 L 511 1 L 511 121 L 41 121" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)rotate(-90 31 61)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 61px; margin-left: -28px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Performer 1</div></div></div></foreignObject><text x="31" y="65" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Performer 1</text></switch></g><ellipse cx="86" cy="61" rx="25" ry="25" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><path d="M 151 31 C 151 25.48 155.48 21 161 21 L 261 21 C 266.52 21 271 25.48 271 31 L 271 91 C 271 96.52 266.52 101 261 101 L 161 101 C 155.48 101 151 96.52 151 91 L 151 31 Z" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 153 32 L 153 90 C 153 94.97 157.03 99 162 99 L 260 99 C 264.97 99 269 94.97 269 90 L 269 32 C 269 27.03 264.97 23 260 23 L 162 23 C 157.03 23 153 27.03 153 32" fill="none" stroke="none" pointer-events="all"/><path d="M 151 31 C 151 25.48 155.48 21 161 21 L 261 21 C 266.52 21 271 25.48 271 31 L 271 91 C 271 96.52 266.52 101 261 101 L 161 101 C 155.48 101 151 96.52 151 91 L 151 31 Z" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 61px; margin-left: 152px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Task 1</div></div></div></foreignObject><text x="211" y="65" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Task 1</text></switch></g><path d="M 111 61 L 139.88 61" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 149.88 61 L 139.88 66 L 139.88 56 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 41 121 L 21 121 L 21 241 L 41 241" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 41 121 L 511 121 L 511 241 L 41 241" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)rotate(-90 31 181)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 181px; margin-left: -28px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Performer 2</div></div></div></foreignObject><text x="31" y="185" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Performer 2</text></switch></g><path d="M 151 151 C 151 145.48 155.48 141 161 141 L 261 141 C 266.52 141 271 145.48 271 151 L 271 211 C 271 216.52 266.52 221 261 221 L 161 221 C 155.48 221 151 216.52 151 211 L 151 151 Z" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 153 152 L 153 210 C 153 214.97 157.03 219 162 219 L 260 219 C 264.97 219 269 214.97 269 210 L 269 152 C 269 147.03 264.97 143 260 143 L 162 143 C 157.03 143 153 147.03 153 152" fill="none" stroke="none" pointer-events="all"/><path d="M 151 151 C 151 145.48 155.48 141 161 141 L 261 141 C 266.52 141 271 145.48 271 151 L 271 211 C 271 216.52 266.52 221 261 221 L 161 221 C 155.48 221 151 216.52 151 211 L 151 151 Z" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 181px; margin-left: 152px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Task 2</div></div></div></foreignObject><text x="211" y="185" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Task 2</text></switch></g><path d="M 336 156 L 361 181 L 336 206 L 311 181 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 213px; margin-left: 336px;"><div data-drawio-colors="color: rgb(0, 0, 0); background-color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">OK?</div></div></div></foreignObject><text x="336" y="225" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">OK?</text></switch></g><path d="M 271 181 L 299.88 181" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 309.88 181 L 299.88 186 L 299.88 176 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><ellipse cx="456" cy="181" rx="25" ry="25" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="3" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 213px; margin-left: 456px;"><div data-drawio-colors="color: rgb(0, 0, 0); background-color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">Not OK</div></div></div></foreignObject><text x="456" y="225" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Not OK</text></switch></g><path d="M 361 181 L 419.88 181" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 429.88 181 L 419.88 186 L 419.88 176 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 182px; margin-left: 401px;"><div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">no</div></div></div></foreignObject><text x="401" y="185" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">no</text></switch></g><path d="M 41 241 L 21 241 L 21 361 L 41 361" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 41 241 L 511 241 L 511 361 L 41 361" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)rotate(-90 31 301)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 301px; margin-left: -28px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Performer 3</div></div></div></foreignObject><text x="31" y="305" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Performer 3</text></switch></g><path d="M 276 271 C 276 265.48 280.48 261 286 261 L 386 261 C 391.52 261 396 265.48 396 271 L 396 331 C 396 336.52 391.52 341 386 341 L 286 341 C 280.48 341 276 336.52 276 331 L 276 271 Z" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 278 272 L 278 330 C 278 334.97 282.03 339 287 339 L 385 339 C 389.97 339 394 334.97 394 330 L 394 272 C 394 267.03 389.97 263 385 263 L 287 263 C 282.03 263 278 267.03 278 272" fill="none" stroke="none" pointer-events="all"/><path d="M 276 271 C 276 265.48 280.48 261 286 261 L 386 261 C 391.52 261 396 265.48 396 271 L 396 331 C 396 336.52 391.52 341 386 341 L 286 341 C 280.48 341 276 336.52 276 331 L 276 271 Z" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 301px; margin-left: 277px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Task 3</div></div></div></foreignObject><text x="336" y="305" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Task 3</text></switch></g><ellipse cx="456" cy="301" rx="25" ry="25" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="3" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 333px; margin-left: 456px;"><div data-drawio-colors="color: rgb(0, 0, 0); background-color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">OK</div></div></div></foreignObject><text x="456" y="345" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">OK</text></switch></g><path d="M 396 301 L 416 301 L 411 301 L 419.88 301" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 429.88 301 L 419.88 306 L 419.88 296 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 211 101 L 211 129.88" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 211 139.88 L 206 129.88 L 216 129.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 336 206 L 336 254.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 336 259.88 L 332.5 252.88 L 336 254.63 L 339.5 252.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 234px; margin-left: 336px;"><div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">yes</div></div></div></foreignObject><text x="336" y="237" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">yes</text></switch></g></g></svg></diagram>
 ===== ✘ How NOT to =====
@@ Line 17: / Line 15: @@
 Most business people view the process diagrams horizontally while IT people generally prefer vertical orientation - this is a common example of "business - IT divide". It's IT who should make a step forward because business, not IT, owns the process.
-Many BPMN modelers (e.g. [[en:tool:bizagi_modeler]], [[en:tool:bpmn.io]] don't support vertical alignment.
+Many BPMN modelers (e.g. [[en:tool:bizagi_modeler]], [[en:tool:bpmn.io]]) don't support vertical arrangement.
-===== Exceptions =====
-None.
 ===== See also =====
@@ Line 31: / Line 25: @@
  --- //[[user:bell|Anatoly Belaychuk]] 2023-09-13 12:41//