├── LICENSE
├── README.md
└── assets
    ├── Example Boards
        ├── Event Modeling.xml
        ├── InspectIO Example.xml
        ├── The Picture.xml
        └── prooph board Example.xml
    ├── connect_with_arrow.gif
    ├── event_modeling.gif
    ├── hr_and_autosize.gif
    └── realtime_collaboration.gif


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 event-engine
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # InspectIO
 2 | 
 3 | **!!!InspectIO is now prooph board!!!**
 4 | 
 5 | Main git repo has been moved to: [prooph board](https://github.com/proophboard)
 6 | 
 7 | [![Join the chat at https://gitter.im/inspectio-chat/community](https://badges.gitter.im/inspectio-chat/community.svg)](https://gitter.im/inspectio-chat/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 8 | 
 9 | InspectIO [Docs](https://github.com/event-engine/inspectio/wiki) & [Issue Tracker](https://github.com/event-engine/inspectio/issues)
10 | 
11 | ## Event Storming and Modeling
12 | ![Realtime Collaboration](assets/event_modeling.gif)
13 | 
14 | ## Introduction Slides
15 | 
16 | [From Event Storming to working code](https://slides.com/prooph/event-driven-development/fullscreen)
17 | 
18 | ## Free Version
19 | 
20 | [InspectIO Standalone Client](https://event-engine.io/free-inspectio/)
21 | 
22 | ## Example Boards
23 | - [Annotated InspectIO Example](https://event-engine.io/free-inspectio/inspectio/boards/import/https%3A%2F%2Fraw.githubusercontent.com%2Fevent-engine%2Finspectio%2Fmaster%2Fassets%2FExample%2520Boards%2FInspectIO%2520Example.xml)
24 | 
25 | - [Event Storming - The Picture](https://event-engine.io/free-inspectio/inspectio/boards/import/https%3A%2F%2Fraw.githubusercontent.com%2Fevent-engine%2Finspectio%2Fmaster%2Fassets%2FExample%2520Boards%2FThe%2520Picture.xml)
26 | 
27 | - [Event Modeling Example](https://event-engine.io/free-inspectio/inspectio/boards/import/https%3A%2F%2Fraw.githubusercontent.com%2Fevent-engine%2Finspectio%2Fmaster%2Fassets%2FExample%2520Boards%2FEvent%2520Modeling.xml)
28 | 
29 | ## Cody Tutorial
30 | 
31 | - [Node.js Code Generation Tutorial](https://github.com/event-engine/inspectio/wiki/Node.js-Cody-Tutorial)
32 | - [PHP Code Generation Tutorial](https://github.com/event-engine/inspectio/wiki/PHP-Cody-Tutorial)
33 | 
34 | 


--------------------------------------------------------------------------------
/assets/Example Boards/Event Modeling.xml:
--------------------------------------------------------------------------------
  1 | <mxGraphModel dx="3075.33" dy="2004.21" grid="1" gridSize="16" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" pageScale="1" pageWidth="827" pageHeight="1169" background="#ffffff">
  2 |   <root>
  3 |     <mxCell id="e975feae-1579-4c09-98d0-98cbf2108aec"/>
  4 |     <mxCell id="7fe80d19-d317-4e9d-8296-96c598786d78" parent="e975feae-1579-4c09-98d0-98cbf2108aec"/>
  5 |     <mxCell id="ivtpHizCgVGdgJQuQcm7uK" value="&lt;font style=&quot;font-size: 48px;&quot;&gt;Time&lt;/font&gt;&lt;div&gt;&lt;font style=&quot;font-size: 48px;&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font style=&quot;font-size: 48px;&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font style=&quot;font-size: 48px;&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font style=&quot;font-size: 48px;&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font style=&quot;font-size: 48px;&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font style=&quot;font-size: 48px;&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font style=&quot;font-size: 48px;&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font style=&quot;font-size: 48px;&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font style=&quot;font-size: 48px;&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font style=&quot;font-size: 48px;&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font style=&quot;font-size: 48px;&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font style=&quot;font-size: 48px;&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font style=&quot;font-size: 48px;&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font style=&quot;font-size: 48px;&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font style=&quot;font-size: 48px;&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font style=&quot;font-size: 48px;&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font style=&quot;font-size: 48px;&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/div&gt;" style="freeText" vertex="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
  6 |       <mxGeometry x="2704" y="-1317" width="176" height="2208" as="geometry"/>
  7 |     </mxCell>
  8 |     <mxCell id="7T145QbDkFvmXW6Eheiqri" style="html=1;" edge="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78" source="iMB6pkDhDEkauqZPe3GGNL" target="ivtpHizCgVGdgJQuQcm7uK">
  9 |       <mxGeometry relative="1" as="geometry">
 10 |         <Array as="points">
 11 |           <mxPoint x="1312" y="-677"/>
 12 |           <mxPoint x="1312" y="-677"/>
 13 |         </Array>
 14 |       </mxGeometry>
 15 |     </mxCell>
 16 |     <mxCell id="iMB6pkDhDEkauqZPe3GGNL" value="&amp;nbsp;&amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm80 248c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;" style="freeText" vertex="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
 17 |       <mxGeometry x="-2330" y="-707" width="100" height="60" as="geometry"/>
 18 |     </mxCell>
 19 |     <mxCell id="uVSFB2s52jDa3TdS1w3qe8" value="&lt;font style=&quot;font-size: 48px;&quot;&gt;Guest&lt;/font&gt;" style="freeText" vertex="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
 20 |       <mxGeometry x="-2417" y="-937.5" width="208" height="60" as="geometry"/>
 21 |     </mxCell>
 22 |     <mxCell id="nsNcfmtWxwrqVSSajJHTPj" style="html=1;dashed=1;" edge="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78" source="nuKFX4E2dYoLFQN3VMqqP" target="ivtpHizCgVGdgJQuQcm7uK">
 23 |       <mxGeometry relative="1" as="geometry">
 24 |         <Array as="points">
 25 |           <mxPoint x="1430" y="-1059.5"/>
 26 |           <mxPoint x="1430" y="-1059.5"/>
 27 |         </Array>
 28 |       </mxGeometry>
 29 |     </mxCell>
 30 |     <mxCell id="nuKFX4E2dYoLFQN3VMqqP" value="&lt;font style=&quot;font-size: 48px;&quot;&gt;Manager&lt;/font&gt;&lt;div&gt;&lt;font style=&quot;font-size: 48px;&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font style=&quot;font-size: 48px;&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/div&gt;" style="freeText" vertex="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
 31 |       <mxGeometry x="-2417" y="-1273.5" width="256" height="224" as="geometry"/>
 32 |     </mxCell>
 33 |     <mxCell id="uMXNVTXV9UGUFu9BAu3qWo" style="html=1;dashed=1;" edge="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78" source="sXZCAdjvkmFunJbzToy3bW" target="ivtpHizCgVGdgJQuQcm7uK">
 34 |       <mxGeometry relative="1" as="geometry">
 35 |         <Array as="points">
 36 |           <mxPoint x="-1018" y="-148"/>
 37 |           <mxPoint x="-1018" y="-148"/>
 38 |         </Array>
 39 |       </mxGeometry>
 40 |     </mxCell>
 41 |     <mxCell id="sXZCAdjvkmFunJbzToy3bW" value="&lt;font style=&quot;font-size: 48px;&quot;&gt;Inventory&lt;/font&gt;" style="freeText" vertex="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
 42 |       <mxGeometry x="-2417" y="-305" width="272" height="158" as="geometry"/>
 43 |     </mxCell>
 44 |     <mxCell id="uPpUKVq9R7bZMrQAQhcTGE" style="html=1;dashed=1;" edge="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78" source="VnBRa9zb79zHNvpi4FwpZ" target="ivtpHizCgVGdgJQuQcm7uK">
 45 |       <mxGeometry relative="1" as="geometry">
 46 |         <Array as="points">
 47 |           <mxPoint x="1333" y="61"/>
 48 |           <mxPoint x="1333" y="61"/>
 49 |         </Array>
 50 |       </mxGeometry>
 51 |     </mxCell>
 52 |     <mxCell id="VnBRa9zb79zHNvpi4FwpZ" value="&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 48px;&quot;&gt;Auth&lt;/span&gt;&lt;/div&gt;" style="freeText" vertex="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
 53 |       <mxGeometry x="-2392" y="-67" width="240" height="158" as="geometry"/>
 54 |     </mxCell>
 55 |     <mxCell id="oU8ivaSHuZZq3oopDqx8z7" style="html=1;dashed=1;" edge="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78" source="5H4CqEJh3gTfKFd3wZNJqW" target="ivtpHizCgVGdgJQuQcm7uK">
 56 |       <mxGeometry relative="1" as="geometry">
 57 |         <Array as="points">
 58 |           <mxPoint x="1322" y="269"/>
 59 |           <mxPoint x="1322" y="269"/>
 60 |         </Array>
 61 |       </mxGeometry>
 62 |     </mxCell>
 63 |     <mxCell id="5H4CqEJh3gTfKFd3wZNJqW" value="&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 48px;&quot;&gt;Payment&lt;/span&gt;&lt;/div&gt;" style="freeText" vertex="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
 64 |       <mxGeometry x="-2400" y="141" width="256" height="158" as="geometry"/>
 65 |     </mxCell>
 66 |     <mxCell id="dcLoMP9K3kMUUtJRQ2b5Cj" style="html=1;dashed=1;" edge="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78" source="ikjYGGtTgCxxBeEHXG6DrV" target="ivtpHizCgVGdgJQuQcm7uK">
 67 |       <mxGeometry relative="1" as="geometry">
 68 |         <Array as="points">
 69 |           <mxPoint x="1429" y="477"/>
 70 |           <mxPoint x="1429" y="477"/>
 71 |         </Array>
 72 |       </mxGeometry>
 73 |     </mxCell>
 74 |     <mxCell id="ikjYGGtTgCxxBeEHXG6DrV" value="&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 48px;&quot;&gt;GPS&lt;/span&gt;&lt;/div&gt;" style="freeText" vertex="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
 75 |       <mxGeometry x="-2400" y="351.5" width="235" height="158" as="geometry"/>
 76 |     </mxCell>
 77 |     <mxCell id="4soRNa97Z5tkE8x3ieySVk" style="html=1;" edge="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78" source="bgqbYGY4ixWpuQi46wZoDd" target="j7r29tRRd8JVuC34AhNFfg">
 78 |       <mxGeometry relative="1" as="geometry"/>
 79 |     </mxCell>
 80 |     <mxCell id="8orSeG271ctWQajGzRRwwA" style="html=1;" edge="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78" source="9YrgVByd75VnkLVqnRWPYJ" target="dvg58meDzVVjRy2pgfVDiR">
 81 |       <mxGeometry relative="1" as="geometry">
 82 |         <Array as="points">
 83 |           <mxPoint x="-800" y="-255"/>
 84 |         </Array>
 85 |       </mxGeometry>
 86 |     </mxCell>
 87 |     <mxCell id="29w5MWT8Q49DPy4a57AhFQ" style="html=1;" edge="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78" source="dDG5ezpzxT9Afzj5ALJMrh" target="a4Kuqbg7HkV5SmehQdzpd1">
 88 |       <mxGeometry relative="1" as="geometry"/>
 89 |     </mxCell>
 90 |     <mxCell id="aQmKcw6vp1qFx2NB1N2qau" value="&lt;div style=&quot;text-align: left;&quot;&gt;&lt;br&gt;&lt;/div&gt;" style="freeText" vertex="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
 91 |       <mxGeometry x="-1314" y="1049.5" width="365" height="158" as="geometry"/>
 92 |     </mxCell>
 93 |     <mxCell id="fWtAKqUDgQFbxsrSHdeyYC" value="&lt;div style=&quot;text-align: left;&quot;&gt;&lt;br&gt;&lt;/div&gt;" style="freeText" vertex="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
 94 |       <mxGeometry x="-309" y="1049.5" width="365" height="158" as="geometry"/>
 95 |     </mxCell>
 96 |     <mxCell id="9seM4aHM7jZKcKvpakWiX3" value="&lt;div style=&quot;text-align: left;&quot;&gt;&lt;br&gt;&lt;/div&gt;" style="freeText" vertex="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
 97 |       <mxGeometry x="792" y="1049.5" width="563" height="158" as="geometry"/>
 98 |     </mxCell>
 99 |     <mxCell id="s2cp16oy8sT1Xsy6tNugMG" value="&lt;div style=&quot;text-align: left;&quot;&gt;&lt;br&gt;&lt;/div&gt;" style="freeText" vertex="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
100 |       <mxGeometry x="1960" y="1049.5" width="563" height="158" as="geometry"/>
101 |     </mxCell>
102 |     <feature label="Registration" type="feature" id="oNqTqYiR5H9zL8B2zG4Tsj">
103 |       <mxCell style="feature" vertex="1" alternateStyle="feature;verticalAlign=middle;fontSize=56;" originalStyle="feature" alternateStyleEnabled="0" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
104 |         <mxGeometry x="-2112" y="-1061" width="400" height="1122" as="geometry">
105 |           <mxRectangle x="-2112" y="-1061" width="400" height="1122" as="alternateBounds"/>
106 |         </mxGeometry>
107 |       </mxCell>
108 |     </feature>
109 |     <ui label="&lt;div&gt;Guest Registration&lt;/div&gt;&lt;div&gt;&lt;hr id=&quot;null&quot;&gt;&lt;/div&gt;&lt;div&gt;&amp;nbsp;&amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 448 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M0 84V44c0-8.837 7.163-16 16-16h416c8.837 0 16 7.163 16 16v40c0 8.837-7.163 16-16 16H16c-8.837 0-16-7.163-16-16zm16 144h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 256h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0-128h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;&lt;br&gt;&lt;/div&gt;&lt;div&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M416 448h-84c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h84c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32h-84c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h84c53 0 96 43 96 96v192c0 53-43 96-96 96zm-47-201L201 79c-15-15-41-4.5-41 17v96H24c-13.3 0-24 10.7-24 24v96c0 13.3 10.7 24 24 24h136v96c0 21.5 26 32 41 17l168-168c9.3-9.4 9.3-24.6 0-34z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;&lt;br&gt;&lt;/div&gt;" type="ui" id="dhEE5hFAm8kv3XMQ4UJEpj">
110 |       <mxCell style="ui" vertex="1" tempVisible="1" parent="oNqTqYiR5H9zL8B2zG4Tsj">
111 |         <mxGeometry x="94.5" y="112" width="211" height="132" as="geometry"/>
112 |       </mxCell>
113 |     </ui>
114 |     <command label="Register" type="command" id="wmz4F46FEDNW9YYz7xWLrr">
115 |       <mxCell style="command" vertex="1" tempVisible="1" parent="oNqTqYiR5H9zL8B2zG4Tsj">
116 |         <mxGeometry x="120" y="498" width="160" height="100" as="geometry"/>
117 |       </mxCell>
118 |     </command>
119 |     <mxCell id="eHGSegMd3kGeriGwgzRxWH" style="html=1;" edge="1" tempVisible="1" parent="oNqTqYiR5H9zL8B2zG4Tsj" source="dhEE5hFAm8kv3XMQ4UJEpj" target="wmz4F46FEDNW9YYz7xWLrr">
120 |       <mxGeometry relative="1" as="geometry"/>
121 |     </mxCell>
122 |     <event label="Registered" type="event" id="3TkTfJsiYwhDAmz7A9LUDm">
123 |       <mxCell style="event" vertex="1" tempVisible="1" parent="oNqTqYiR5H9zL8B2zG4Tsj">
124 |         <mxGeometry x="120" y="973" width="160" height="100" as="geometry"/>
125 |       </mxCell>
126 |     </event>
127 |     <mxCell id="5q7jSX2WLb1q77FjZUWj54" style="html=1;" edge="1" tempVisible="1" parent="oNqTqYiR5H9zL8B2zG4Tsj" source="wmz4F46FEDNW9YYz7xWLrr" target="3TkTfJsiYwhDAmz7A9LUDm">
128 |       <mxGeometry relative="1" as="geometry"/>
129 |     </mxCell>
130 |     <feature label="Add Room" type="feature" id="wQuuzgF4AYQ443GZGyL8su">
131 |       <mxCell style="feature" vertex="1" alternateStyle="feature;verticalAlign=middle;fontSize=56;" originalStyle="feature" alternateStyleEnabled="0" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
132 |         <mxGeometry x="-1640" y="-1408.5" width="272" height="1264" as="geometry">
133 |           <mxRectangle x="15120" y="-1296" width="272" height="1264" as="alternateBounds"/>
134 |         </mxGeometry>
135 |       </mxCell>
136 |     </feature>
137 |     <ui label="&lt;div&gt;Room Management&lt;/div&gt;&lt;div&gt;&lt;hr id=&quot;null&quot;&gt;&lt;/div&gt;&lt;div&gt;&amp;nbsp; &amp;nbsp;&amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M149.333 216v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24v-80c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zM125.333 32H24C10.745 32 0 42.745 0 56v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24zm80 448H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm-24-424v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24zm24 264H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp; &amp;nbsp;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;text-align: right;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&amp;nbsp;&lt;/span&gt;&amp;nbsp;&amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 448 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;text-align: right;&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;br&gt;&lt;/div&gt;" type="ui" id="mSKA2XZbD93tdBnUGCqZeL">
138 |       <mxCell style="ui" vertex="1" tempVisible="1" parent="wQuuzgF4AYQ443GZGyL8su">
139 |         <mxGeometry x="32" y="108" width="211" height="132" as="geometry"/>
140 |       </mxCell>
141 |     </ui>
142 |     <mxCell id="vS5Vkkz8udiExcuFKc2coP" style="html=1;" edge="1" tempVisible="1" parent="wQuuzgF4AYQ443GZGyL8su" source="mSKA2XZbD93tdBnUGCqZeL" target="mFtcXpJEqb1gao4p1JfTHu">
143 |       <mxGeometry relative="1" as="geometry"/>
144 |     </mxCell>
145 |     <command label="Add Room" type="command" id="mFtcXpJEqb1gao4p1JfTHu">
146 |       <mxCell style="command" vertex="1" tempVisible="1" parent="wQuuzgF4AYQ443GZGyL8su">
147 |         <mxGeometry x="58" y="848" width="160" height="100" as="geometry"/>
148 |       </mxCell>
149 |     </command>
150 |     <event label="Room Added" type="event" id="bgqbYGY4ixWpuQi46wZoDd">
151 |       <mxCell style="event" vertex="1" tempVisible="1" parent="wQuuzgF4AYQ443GZGyL8su">
152 |         <mxGeometry x="58" y="1116" width="160" height="100" as="geometry"/>
153 |       </mxCell>
154 |     </event>
155 |     <mxCell id="mA9Y1GEFi4b9BVFjpTPnzx" style="html=1;" edge="1" tempVisible="1" parent="wQuuzgF4AYQ443GZGyL8su" source="mFtcXpJEqb1gao4p1JfTHu" target="bgqbYGY4ixWpuQi46wZoDd">
156 |       <mxGeometry relative="1" as="geometry"/>
157 |     </mxCell>
158 |     <feature label="Booking" type="feature" id="6Sbu7c47osaSENyMUAKCCx">
159 |       <mxCell style="feature" vertex="1" alternateStyle="feature;verticalAlign=middle;fontSize=56;" originalStyle="feature" alternateStyleEnabled="0" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
160 |         <mxGeometry x="-1330" y="-1056.5" width="538" height="912" as="geometry">
161 |           <mxRectangle x="15430" y="-944" width="538" height="912" as="alternateBounds"/>
162 |         </mxGeometry>
163 |       </mxCell>
164 |     </feature>
165 |     <document label="Room&amp;nbsp;&lt;div&gt;Availability&lt;/div&gt;" type="document" id="j7r29tRRd8JVuC34AhNFfg">
166 |       <mxCell style="document" vertex="1" tempVisible="1" parent="6Sbu7c47osaSENyMUAKCCx">
167 |         <mxGeometry x="74" y="496" width="160" height="100" as="geometry"/>
168 |       </mxCell>
169 |     </document>
170 |     <ui label="&lt;div&gt;Booking Engine&lt;/div&gt;&lt;div&gt;&lt;hr id=&quot;null&quot;&gt;&lt;/div&gt;&amp;nbsp;&amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 448 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zm0 96v80h-96v-80h96zM176 352v-80h96v80h-96zm96 32v80h-96v-80h96zm-128-32H48v-80h96v80zm32-112v-80h96v80h-96zm128 32h96v80h-96v-80zM144 160v80H48v-80h96zM48 458v-74h96v80H54c-3.3 0-6-2.7-6-6zm346 6h-90v-80h96v74c0 3.3-2.7 6-6 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&amp;nbsp;&lt;div&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;&lt;br&gt;&lt;/div&gt;" type="ui" id="2B7877m5Zwz17Aira4ucSJ">
171 |       <mxCell style="ui" vertex="1" tempVisible="1" parent="6Sbu7c47osaSENyMUAKCCx">
172 |         <mxGeometry x="154" y="98" width="230" height="144" as="geometry"/>
173 |       </mxCell>
174 |     </ui>
175 |     <mxCell id="fouLVMU8B897jkRbirhJV6" style="html=1;" edge="1" tempVisible="1" parent="6Sbu7c47osaSENyMUAKCCx" source="j7r29tRRd8JVuC34AhNFfg" target="2B7877m5Zwz17Aira4ucSJ">
176 |       <mxGeometry relative="1" as="geometry">
177 |         <Array as="points">
178 |           <mxPoint x="188.5" y="427"/>
179 |           <mxPoint x="188.5" y="427"/>
180 |         </Array>
181 |       </mxGeometry>
182 |     </mxCell>
183 |     <command label="Book Room" type="command" id="6VmtDJo3nN268wj4thJUAu">
184 |       <mxCell style="command" vertex="1" tempVisible="1" parent="6Sbu7c47osaSENyMUAKCCx">
185 |         <mxGeometry x="304" y="496" width="160" height="100" as="geometry"/>
186 |       </mxCell>
187 |     </command>
188 |     <mxCell id="uaqdiNyUxQDtBYqFwgL5CG" style="html=1;" edge="1" tempVisible="1" parent="6Sbu7c47osaSENyMUAKCCx" source="2B7877m5Zwz17Aira4ucSJ" target="6VmtDJo3nN268wj4thJUAu">
189 |       <mxGeometry relative="1" as="geometry">
190 |         <Array as="points">
191 |           <mxPoint x="314" y="320"/>
192 |           <mxPoint x="383" y="320"/>
193 |         </Array>
194 |       </mxGeometry>
195 |     </mxCell>
196 |     <event label="Room Booked" type="event" id="9YrgVByd75VnkLVqnRWPYJ">
197 |       <mxCell style="event" vertex="1" tempVisible="1" parent="6Sbu7c47osaSENyMUAKCCx">
198 |         <mxGeometry x="304" y="754" width="160" height="100" as="geometry"/>
199 |       </mxCell>
200 |     </event>
201 |     <mxCell id="dwLPyvcJscRMX8nHktYQw6" style="html=1;" edge="1" tempVisible="1" parent="6Sbu7c47osaSENyMUAKCCx" source="6VmtDJo3nN268wj4thJUAu" target="9YrgVByd75VnkLVqnRWPYJ">
202 |       <mxGeometry relative="1" as="geometry"/>
203 |     </mxCell>
204 |     <feature label="Ready Room" type="feature" id="gc5dHoK45HoHXHWLpuAaC3">
205 |       <mxCell style="feature" vertex="1" alternateStyle="feature;verticalAlign=middle;fontSize=56;" originalStyle="feature" alternateStyleEnabled="0" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
206 |         <mxGeometry x="-745" y="-1408.5" width="465" height="1264" as="geometry">
207 |           <mxRectangle x="16015" y="-1296" width="465" height="1264" as="alternateBounds"/>
208 |         </mxGeometry>
209 |       </mxCell>
210 |     </feature>
211 |     <document label="Cleaning Schedule" type="document" id="dvg58meDzVVjRy2pgfVDiR">
212 |       <mxCell style="document" vertex="1" tempVisible="1" parent="gc5dHoK45HoHXHWLpuAaC3">
213 |         <mxGeometry x="33" y="848" width="160" height="100" as="geometry"/>
214 |       </mxCell>
215 |     </document>
216 |     <ui label="&lt;div&gt;Room Management&lt;/div&gt;&lt;div&gt;&lt;hr id=&quot;null&quot;&gt;&lt;/div&gt;&amp;nbsp;&amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 384 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM96 424c-13.3 0-24-10.7-24-24s10.7-24 24-24 24 10.7 24 24-10.7 24-24 24zm0-96c-13.3 0-24-10.7-24-24s10.7-24 24-24 24 10.7 24 24-10.7 24-24 24zm0-96c-13.3 0-24-10.7-24-24s10.7-24 24-24 24 10.7 24 24-10.7 24-24 24zm96-192c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm128 368c0 4.4-3.6 8-8 8H168c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-96c0 4.4-3.6 8-8 8H168c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-96c0 4.4-3.6 8-8 8H168c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;div&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M504 256C504 119 393 8 256 8S8 119 8 256s111 248 248 248 248-111 248-248zm-448 0c0-110.5 89.5-200 200-200s200 89.5 200 200-89.5 200-200 200S56 366.5 56 256zm72 20v-40c0-6.6 5.4-12 12-12h116v-67c0-10.7 12.9-16 20.5-8.5l99 99c4.7 4.7 4.7 12.3 0 17l-99 99c-7.6 7.6-20.5 2.2-20.5-8.5v-67H140c-6.6 0-12-5.4-12-12z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;&lt;/div&gt;" type="ui" id="mXQZA1hrZYk9NPQM2xMQCp">
217 |       <mxCell style="ui" vertex="1" tempVisible="1" parent="gc5dHoK45HoHXHWLpuAaC3">
218 |         <mxGeometry x="33" y="108" width="211" height="132" as="geometry"/>
219 |       </mxCell>
220 |     </ui>
221 |     <mxCell id="gVdXf5DQSNMFowgmftKQC3" style="html=1;" edge="1" tempVisible="1" parent="gc5dHoK45HoHXHWLpuAaC3" source="dvg58meDzVVjRy2pgfVDiR" target="mXQZA1hrZYk9NPQM2xMQCp">
222 |       <mxGeometry relative="1" as="geometry">
223 |         <Array as="points">
224 |           <mxPoint x="97" y="694"/>
225 |           <mxPoint x="97" y="694"/>
226 |         </Array>
227 |       </mxGeometry>
228 |     </mxCell>
229 |     <command label="Ready&amp;nbsp;&lt;div&gt;Room&lt;/div&gt;" type="command" id="9ix3r4rDztnMNvSNbFmvvA">
230 |       <mxCell style="command" vertex="1" tempVisible="1" parent="gc5dHoK45HoHXHWLpuAaC3">
231 |         <mxGeometry x="273" y="848" width="160" height="100" as="geometry"/>
232 |       </mxCell>
233 |     </command>
234 |     <mxCell id="heejt8Xi1V3rT3ThtdtSrr" style="html=1;" edge="1" tempVisible="1" parent="gc5dHoK45HoHXHWLpuAaC3" source="mXQZA1hrZYk9NPQM2xMQCp" target="9ix3r4rDztnMNvSNbFmvvA">
235 |       <mxGeometry relative="1" as="geometry">
236 |         <Array as="points">
237 |           <mxPoint x="177" y="304"/>
238 |           <mxPoint x="352" y="304"/>
239 |         </Array>
240 |       </mxGeometry>
241 |     </mxCell>
242 |     <event label="Room Readied" type="event" id="KcPsi6EN7XNFBGALuJqps">
243 |       <mxCell style="event" vertex="1" tempVisible="1" parent="gc5dHoK45HoHXHWLpuAaC3">
244 |         <mxGeometry x="273" y="1106" width="160" height="100" as="geometry"/>
245 |       </mxCell>
246 |     </event>
247 |     <mxCell id="uP2zneGQmAKUp8ojEviQ2a" style="html=1;" edge="1" tempVisible="1" parent="gc5dHoK45HoHXHWLpuAaC3" source="9ix3r4rDztnMNvSNbFmvvA" target="KcPsi6EN7XNFBGALuJqps">
248 |       <mxGeometry relative="1" as="geometry"/>
249 |     </mxCell>
250 |     <feature label="Check In" type="feature" id="kUPDJPUFecaqhV2CbzMTkD">
251 |       <mxCell style="feature" vertex="1" alternateStyle="feature;verticalAlign=middle;fontSize=56;" originalStyle="feature" alternateStyleEnabled="0" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
252 |         <mxGeometry x="-248" y="-1058.5" width="256" height="914" as="geometry">
253 |           <mxRectangle x="16512" y="-946" width="256" height="914" as="alternateBounds"/>
254 |         </mxGeometry>
255 |       </mxCell>
256 |     </feature>
257 |     <ui label="&lt;div&gt;Check In Terminal&lt;/div&gt;&lt;div&gt;&lt;hr id=&quot;null&quot;&gt;&lt;/div&gt;&lt;div&gt;&amp;nbsp;&amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 448 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M0 84V44c0-8.837 7.163-16 16-16h416c8.837 0 16 7.163 16 16v40c0 8.837-7.163 16-16 16H16c-8.837 0-16-7.163-16-16zm16 144h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 256h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0-128h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;&lt;br&gt;&lt;/div&gt;&lt;div&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M416 448h-84c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h84c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32h-84c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h84c53 0 96 43 96 96v192c0 53-43 96-96 96zm-47-201L201 79c-15-15-41-4.5-41 17v96H24c-13.3 0-24 10.7-24 24v96c0 13.3 10.7 24 24 24h136v96c0 21.5 26 32 41 17l168-168c9.3-9.4 9.3-24.6 0-34z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;&lt;br&gt;&lt;/div&gt;" type="ui" id="nbow424JLTva759bJv4Mvg">
258 |       <mxCell style="ui" vertex="1" tempVisible="1" parent="kUPDJPUFecaqhV2CbzMTkD">
259 |         <mxGeometry x="16.5" y="112" width="211" height="132" as="geometry"/>
260 |       </mxCell>
261 |     </ui>
262 |     <command label="Check In" type="command" id="q7oKuviuv2jqRWNWmymWtN">
263 |       <mxCell style="command" vertex="1" tempVisible="1" parent="kUPDJPUFecaqhV2CbzMTkD">
264 |         <mxGeometry x="42" y="498" width="160" height="100" as="geometry"/>
265 |       </mxCell>
266 |     </command>
267 |     <mxCell id="oDcEaAaTGVziS7wML8Ha4p" style="html=1;" edge="1" tempVisible="1" parent="kUPDJPUFecaqhV2CbzMTkD" source="nbow424JLTva759bJv4Mvg" target="q7oKuviuv2jqRWNWmymWtN">
268 |       <mxGeometry relative="1" as="geometry"/>
269 |     </mxCell>
270 |     <event label="Checked In" type="event" id="8U5XryAcMLjW2gqEgaGmwF">
271 |       <mxCell style="event" vertex="1" tempVisible="1" parent="kUPDJPUFecaqhV2CbzMTkD">
272 |         <mxGeometry x="42" y="756" width="160" height="100" as="geometry"/>
273 |       </mxCell>
274 |     </event>
275 |     <mxCell id="PmGwm3WDiHtuDW2wJWWCL" style="html=1;" edge="1" tempVisible="1" parent="kUPDJPUFecaqhV2CbzMTkD" source="q7oKuviuv2jqRWNWmymWtN" target="8U5XryAcMLjW2gqEgaGmwF">
276 |       <mxGeometry relative="1" as="geometry"/>
277 |     </mxCell>
278 |     <feature label="Automatic Check Out" type="feature" id="dVxT1K2HzeNsX1nuVNLh5i">
279 |       <mxCell style="feature" vertex="1" alternateStyle="feature;verticalAlign=middle;fontSize=56;" originalStyle="feature" alternateStyleEnabled="0" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
280 |         <mxGeometry x="62" y="-1368.5" width="1114" height="1851" as="geometry">
281 |           <mxRectangle x="-90" y="-1371" width="1114" height="1851" as="alternateBounds"/>
282 |         </mxGeometry>
283 |       </mxCell>
284 |     </feature>
285 |     <policy label="Checkout Processor&lt;div&gt;&amp;nbsp;&amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 640 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M512.1 191l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0L552 6.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zm-10.5-58.8c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.7-82.4 14.3-52.8 52.8zM386.3 286.1l33.7 16.8c10.1 5.8 14.5 18.1 10.5 29.1-8.9 24.2-26.4 46.4-42.6 65.8-7.4 8.9-20.2 11.1-30.3 5.3l-29.1-16.8c-16 13.7-34.6 24.6-54.9 31.7v33.6c0 11.6-8.3 21.6-19.7 23.6-24.6 4.2-50.4 4.4-75.9 0-11.5-2-20-11.9-20-23.6V418c-20.3-7.2-38.9-18-54.9-31.7L74 403c-10 5.8-22.9 3.6-30.3-5.3-16.2-19.4-33.3-41.6-42.2-65.7-4-10.9.4-23.2 10.5-29.1l33.3-16.8c-3.9-20.9-3.9-42.4 0-63.4L12 205.8c-10.1-5.8-14.6-18.1-10.5-29 8.9-24.2 26-46.4 42.2-65.8 7.4-8.9 20.2-11.1 30.3-5.3l29.1 16.8c16-13.7 34.6-24.6 54.9-31.7V57.1c0-11.5 8.2-21.5 19.6-23.5 24.6-4.2 50.5-4.4 76-.1 11.5 2 20 11.9 20 23.6v33.6c20.3 7.2 38.9 18 54.9 31.7l29.1-16.8c10-5.8 22.9-3.6 30.3 5.3 16.2 19.4 33.2 41.6 42.1 65.8 4 10.9.1 23.2-10 29.1l-33.7 16.8c3.9 21 3.9 42.5 0 63.5zm-117.6 21.1c59.2-77-28.7-164.9-105.7-105.7-59.2 77 28.7 164.9 105.7 105.7zm243.4 182.7l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0l8.2-14.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zM501.6 431c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.6-82.4 14.3-52.8 52.8z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;&lt;br&gt;&lt;/div&gt;" type="policy" id="fxcrApZ3Kj2JCWW3bB84wy">
286 |       <mxCell style="policy" vertex="1" tempVisible="1" parent="dVxT1K2HzeNsX1nuVNLh5i">
287 |         <mxGeometry x="797" y="84" width="186" height="116" as="geometry"/>
288 |       </mxCell>
289 |     </policy>
290 |     <command label="Hotel Proximity&lt;div&gt;Translator&lt;/div&gt;" type="command" id="jFTDe1qziGTEc5KKtz1Ydd">
291 |       <mxCell style="command" vertex="1" tempVisible="1" parent="dVxT1K2HzeNsX1nuVNLh5i">
292 |         <mxGeometry x="172.5" y="808" width="160" height="100" as="geometry"/>
293 |       </mxCell>
294 |     </command>
295 |     <event label="Guest Left&amp;nbsp;&lt;div&gt;Hotel&lt;/div&gt;" type="event" id="qTXW5aE24qRcnwkh9Ym5h3">
296 |       <mxCell style="event" vertex="1" tempVisible="1" parent="dVxT1K2HzeNsX1nuVNLh5i">
297 |         <mxGeometry x="637" y="1076" width="160" height="100" as="geometry"/>
298 |       </mxCell>
299 |     </event>
300 |     <mxCell id="gzA9ZUgNNTdktg5TfwR9xm" style="html=1;" edge="1" tempVisible="1" parent="dVxT1K2HzeNsX1nuVNLh5i" source="jFTDe1qziGTEc5KKtz1Ydd" target="qTXW5aE24qRcnwkh9Ym5h3">
301 |       <mxGeometry relative="1" as="geometry">
302 |         <Array as="points">
303 |           <mxPoint x="362" y="856"/>
304 |           <mxPoint x="362" y="1126"/>
305 |         </Array>
306 |       </mxGeometry>
307 |     </mxCell>
308 |     <mxCell id="nVf763t2tGwH7GxkyANbNv" style="html=1;" edge="1" tempVisible="1" parent="dVxT1K2HzeNsX1nuVNLh5i" source="tH9XwwHAMWrBnjJRpvSsn8" target="fxcrApZ3Kj2JCWW3bB84wy">
309 |       <mxGeometry relative="1" as="geometry">
310 |         <Array as="points">
311 |           <mxPoint x="718" y="503"/>
312 |           <mxPoint x="844" y="503"/>
313 |         </Array>
314 |       </mxGeometry>
315 |     </mxCell>
316 |     <document label="Guest&amp;nbsp;&lt;div&gt;Roster&lt;/div&gt;" type="document" id="tH9XwwHAMWrBnjJRpvSsn8">
317 |       <mxCell style="document" vertex="1" tempVisible="1" parent="dVxT1K2HzeNsX1nuVNLh5i">
318 |         <mxGeometry x="637" y="808" width="160" height="100" as="geometry"/>
319 |       </mxCell>
320 |     </document>
321 |     <mxCell id="tSdbM41YBscE954HjrDoLU" style="html=1;" edge="1" tempVisible="1" parent="dVxT1K2HzeNsX1nuVNLh5i" source="qTXW5aE24qRcnwkh9Ym5h3" target="tH9XwwHAMWrBnjJRpvSsn8">
322 |       <mxGeometry relative="1" as="geometry"/>
323 |     </mxCell>
324 |     <mxCell id="irrYngfpRQecKrpb8FBDZN" style="html=1;" edge="1" tempVisible="1" parent="dVxT1K2HzeNsX1nuVNLh5i" source="fxcrApZ3Kj2JCWW3bB84wy" target="i8zv7iN7jXMJaNvi3664Gg">
325 |       <mxGeometry relative="1" as="geometry">
326 |         <Array as="points">
327 |           <mxPoint x="941" y="339"/>
328 |           <mxPoint x="941" y="339"/>
329 |         </Array>
330 |       </mxGeometry>
331 |     </mxCell>
332 |     <command label="Check Out" type="command" id="i8zv7iN7jXMJaNvi3664Gg">
333 |       <mxCell style="command" vertex="1" tempVisible="1" parent="dVxT1K2HzeNsX1nuVNLh5i">
334 |         <mxGeometry x="890" y="808" width="160" height="100" as="geometry"/>
335 |       </mxCell>
336 |     </command>
337 |     <event label="Checked&lt;div&gt;Out&lt;/div&gt;" type="event" id="wb6M8xRcexQ3DUm2Yg1Zd3">
338 |       <mxCell style="event" vertex="1" tempVisible="1" parent="dVxT1K2HzeNsX1nuVNLh5i">
339 |         <mxGeometry x="890" y="1076" width="160" height="100" as="geometry"/>
340 |       </mxCell>
341 |     </event>
342 |     <mxCell id="fNXpuodEUWERPNaZ3LnunD" style="html=1;" edge="1" tempVisible="1" parent="dVxT1K2HzeNsX1nuVNLh5i" source="i8zv7iN7jXMJaNvi3664Gg" target="wb6M8xRcexQ3DUm2Yg1Zd3">
343 |       <mxGeometry relative="1" as="geometry"/>
344 |     </mxCell>
345 |     <mxCell id="ofsYbwHFJ7LEcwknXLZi4u" style="html=1;" edge="1" tempVisible="1" parent="dVxT1K2HzeNsX1nuVNLh5i" source="7r8NDcrdRKbYgPUQz5aXVA" target="jFTDe1qziGTEc5KKtz1Ydd">
346 |       <mxGeometry relative="1" as="geometry">
347 |         <Array as="points">
348 |           <mxPoint x="179.5" y="1688"/>
349 |           <mxPoint x="243.5" y="1688"/>
350 |         </Array>
351 |       </mxGeometry>
352 |     </mxCell>
353 |     <event label="&lt;div style=&quot;text-align: right;&quot;&gt;Lat: 50.04836&lt;/div&gt;&lt;div style=&quot;text-align: right;&quot;&gt;Long: 8.56790&lt;/div&gt;" type="event" id="7r8NDcrdRKbYgPUQz5aXVA">
354 |       <mxCell style="event" vertex="1" tempVisible="1" parent="dVxT1K2HzeNsX1nuVNLh5i">
355 |         <mxGeometry x="66.5" y="1699" width="160" height="100" as="geometry"/>
356 |       </mxCell>
357 |     </event>
358 |     <mxCell id="txE7MeR1QvSGGSNDYZJYLj" style="html=1;" edge="1" tempVisible="1" parent="dVxT1K2HzeNsX1nuVNLh5i" source="8RQwQU9Pmdpgsbyc2wbbY4" target="jFTDe1qziGTEc5KKtz1Ydd">
359 |       <mxGeometry relative="1" as="geometry">
360 |         <Array as="points">
361 |           <mxPoint x="340" y="1688"/>
362 |           <mxPoint x="276" y="1688"/>
363 |         </Array>
364 |       </mxGeometry>
365 |     </mxCell>
366 |     <event label="&lt;div style=&quot;text-align: right;&quot;&gt;Lat: 50.14836&lt;/div&gt;&lt;div style=&quot;text-align: right;&quot;&gt;Long: 8.56790&lt;/div&gt;" type="event" id="8RQwQU9Pmdpgsbyc2wbbY4">
367 |       <mxCell style="event" vertex="1" tempVisible="1" parent="dVxT1K2HzeNsX1nuVNLh5i">
368 |         <mxGeometry x="277" y="1699" width="160" height="100" as="geometry"/>
369 |       </mxCell>
370 |     </event>
371 |     <feature label="Payment" type="feature" id="tjwmqPyGcM4jrsGSPt6Vxw">
372 |       <mxCell style="feature" vertex="1" alternateStyle="feature;verticalAlign=middle;fontSize=56;" originalStyle="feature" alternateStyleEnabled="0" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
373 |         <mxGeometry x="1268" y="-1056.5" width="854" height="1331" as="geometry">
374 |           <mxRectangle x="1116" y="-1059" width="854" height="1331" as="alternateBounds"/>
375 |         </mxGeometry>
376 |       </mxCell>
377 |     </feature>
378 |     <ui label="&lt;div&gt;Payment Form&lt;/div&gt;&lt;div&gt;&lt;hr id=&quot;null&quot;&gt;&lt;/div&gt;&lt;div&gt;&amp;nbsp;&amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 448 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M0 84V44c0-8.837 7.163-16 16-16h416c8.837 0 16 7.163 16 16v40c0 8.837-7.163 16-16 16H16c-8.837 0-16-7.163-16-16zm16 144h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 256h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0-128h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;&lt;br&gt;&lt;/div&gt;&lt;div&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 288 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M209.2 233.4l-108-31.6C88.7 198.2 80 186.5 80 173.5c0-16.3 13.2-29.5 29.5-29.5h66.3c12.2 0 24.2 3.7 34.2 10.5 6.1 4.1 14.3 3.1 19.5-2l34.8-34c7.1-6.9 6.1-18.4-1.8-24.5C238 74.8 207.4 64.1 176 64V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48h-2.5C45.8 64-5.4 118.7.5 183.6c4.2 46.1 39.4 83.6 83.8 96.6l102.5 30c12.5 3.7 21.2 15.3 21.2 28.3 0 16.3-13.2 29.5-29.5 29.5h-66.3C100 368 88 364.3 78 357.5c-6.1-4.1-14.3-3.1-19.5 2l-34.8 34c-7.1 6.9-6.1 18.4 1.8 24.5 24.5 19.2 55.1 29.9 86.5 30v48c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-48.2c46.6-.9 90.3-28.6 105.7-72.7 21.5-61.6-14.6-124.8-72.5-141.7z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;&lt;br&gt;&lt;/div&gt;" type="ui" id="w96mJZHQoQkoEwda8pgTT8">
379 |       <mxCell style="ui" vertex="1" tempVisible="1" parent="tjwmqPyGcM4jrsGSPt6Vxw">
380 |         <mxGeometry x="42" y="90" width="211" height="132" as="geometry"/>
381 |       </mxCell>
382 |     </ui>
383 |     <command label="Pay" type="command" id="iDF5f83DcLhLJ9r77kCGwg">
384 |       <mxCell style="command" vertex="1" tempVisible="1" parent="tjwmqPyGcM4jrsGSPt6Vxw">
385 |         <mxGeometry x="93" y="496" width="160" height="100" as="geometry"/>
386 |       </mxCell>
387 |     </command>
388 |     <mxCell id="c7RaaKLjS7nvq9TiFpbKYY" style="html=1;" edge="1" tempVisible="1" parent="tjwmqPyGcM4jrsGSPt6Vxw" source="w96mJZHQoQkoEwda8pgTT8" target="iDF5f83DcLhLJ9r77kCGwg">
389 |       <mxGeometry relative="1" as="geometry">
390 |         <Array as="points">
391 |           <mxPoint x="203" y="416"/>
392 |           <mxPoint x="203" y="416"/>
393 |         </Array>
394 |       </mxGeometry>
395 |     </mxCell>
396 |     <event label="Payment&amp;nbsp;&lt;div&gt;Requested&lt;/div&gt;" type="event" id="bJLog2ZGsBWZPF5JgdRHhi">
397 |       <mxCell style="event" vertex="1" tempVisible="1" parent="tjwmqPyGcM4jrsGSPt6Vxw">
398 |         <mxGeometry x="93" y="1179" width="160" height="100" as="geometry"/>
399 |       </mxCell>
400 |     </event>
401 |     <mxCell id="eVxP9fuTPSK87r6EnfwPjg" style="html=1;" edge="1" tempVisible="1" parent="tjwmqPyGcM4jrsGSPt6Vxw" source="iDF5f83DcLhLJ9r77kCGwg" target="bJLog2ZGsBWZPF5JgdRHhi">
402 |       <mxGeometry relative="1" as="geometry">
403 |         <Array as="points">
404 |           <mxPoint x="202" y="880"/>
405 |           <mxPoint x="202" y="880"/>
406 |         </Array>
407 |       </mxGeometry>
408 |     </mxCell>
409 |     <document label="Payments to Process" type="document" id="7kkyyza634W9Fj4XRjUYWq">
410 |       <mxCell style="document" vertex="1" tempVisible="1" parent="tjwmqPyGcM4jrsGSPt6Vxw">
411 |         <mxGeometry x="394" y="496" width="160" height="100" as="geometry"/>
412 |       </mxCell>
413 |     </document>
414 |     <mxCell id="bproyW8ZLX7guBE3tjHABD" style="html=1;" edge="1" tempVisible="1" parent="tjwmqPyGcM4jrsGSPt6Vxw" source="bJLog2ZGsBWZPF5JgdRHhi" target="7kkyyza634W9Fj4XRjUYWq">
415 |       <mxGeometry relative="1" as="geometry"/>
416 |     </mxCell>
417 |     <policy label="Payment Processor&lt;div&gt;&amp;nbsp;&amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 640 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M512.1 191l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0L552 6.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zm-10.5-58.8c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.7-82.4 14.3-52.8 52.8zM386.3 286.1l33.7 16.8c10.1 5.8 14.5 18.1 10.5 29.1-8.9 24.2-26.4 46.4-42.6 65.8-7.4 8.9-20.2 11.1-30.3 5.3l-29.1-16.8c-16 13.7-34.6 24.6-54.9 31.7v33.6c0 11.6-8.3 21.6-19.7 23.6-24.6 4.2-50.4 4.4-75.9 0-11.5-2-20-11.9-20-23.6V418c-20.3-7.2-38.9-18-54.9-31.7L74 403c-10 5.8-22.9 3.6-30.3-5.3-16.2-19.4-33.3-41.6-42.2-65.7-4-10.9.4-23.2 10.5-29.1l33.3-16.8c-3.9-20.9-3.9-42.4 0-63.4L12 205.8c-10.1-5.8-14.6-18.1-10.5-29 8.9-24.2 26-46.4 42.2-65.8 7.4-8.9 20.2-11.1 30.3-5.3l29.1 16.8c16-13.7 34.6-24.6 54.9-31.7V57.1c0-11.5 8.2-21.5 19.6-23.5 24.6-4.2 50.5-4.4 76-.1 11.5 2 20 11.9 20 23.6v33.6c20.3 7.2 38.9 18 54.9 31.7l29.1-16.8c10-5.8 22.9-3.6 30.3 5.3 16.2 19.4 33.2 41.6 42.1 65.8 4 10.9.1 23.2-10 29.1l-33.7 16.8c3.9 21 3.9 42.5 0 63.5zm-117.6 21.1c59.2-77-28.7-164.9-105.7-105.7-59.2 77 28.7 164.9 105.7 105.7zm243.4 182.7l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0l8.2-14.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zM501.6 431c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.6-82.4 14.3-52.8 52.8z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;&lt;br&gt;&lt;/div&gt;" type="policy" id="r22rHkYm68R9o69pQUzoRp">
418 |       <mxCell style="policy" vertex="1" tempVisible="1" parent="tjwmqPyGcM4jrsGSPt6Vxw">
419 |         <mxGeometry x="522" y="98" width="186" height="116" as="geometry"/>
420 |       </mxCell>
421 |     </policy>
422 |     <mxCell id="exnqr8ypnxYtccvc1Gbox6" style="html=1;" edge="1" tempVisible="1" parent="tjwmqPyGcM4jrsGSPt6Vxw" source="7kkyyza634W9Fj4XRjUYWq" target="r22rHkYm68R9o69pQUzoRp">
423 |       <mxGeometry relative="1" as="geometry">
424 |         <Array as="points">
425 |           <mxPoint x="475" y="432"/>
426 |           <mxPoint x="570" y="432"/>
427 |         </Array>
428 |       </mxGeometry>
429 |     </mxCell>
430 |     <command label="Process&amp;nbsp;&lt;div&gt;Payment&lt;/div&gt;" type="command" id="j6VBro5JW9VxcdQynVMjK4">
431 |       <mxCell style="command" vertex="1" tempVisible="1" parent="tjwmqPyGcM4jrsGSPt6Vxw">
432 |         <mxGeometry x="615" y="496" width="160" height="100" as="geometry"/>
433 |       </mxCell>
434 |     </command>
435 |     <mxCell id="3tz4QqpSVRLQoKRCRaA2Cb" style="html=1;" edge="1" tempVisible="1" parent="tjwmqPyGcM4jrsGSPt6Vxw" source="r22rHkYm68R9o69pQUzoRp" target="j6VBro5JW9VxcdQynVMjK4">
436 |       <mxGeometry relative="1" as="geometry">
437 |         <Array as="points">
438 |           <mxPoint x="681.5" y="268"/>
439 |           <mxPoint x="681.5" y="268"/>
440 |         </Array>
441 |       </mxGeometry>
442 |     </mxCell>
443 |     <event label="Payment&amp;nbsp;&lt;div&gt;Succeeded&lt;/div&gt;" type="event" id="dDG5ezpzxT9Afzj5ALJMrh">
444 |       <mxCell style="event" vertex="1" tempVisible="1" parent="tjwmqPyGcM4jrsGSPt6Vxw">
445 |         <mxGeometry x="615" y="1178.9999999999998" width="160" height="100" as="geometry"/>
446 |       </mxCell>
447 |     </event>
448 |     <mxCell id="u9jeQ1vUsGtM4Yg3ApUKQW" style="html=1;" edge="1" tempVisible="1" parent="tjwmqPyGcM4jrsGSPt6Vxw" source="j6VBro5JW9VxcdQynVMjK4" target="dDG5ezpzxT9Afzj5ALJMrh">
449 |       <mxGeometry relative="1" as="geometry"/>
450 |     </mxCell>
451 |     <feature label="Sales Reports" type="feature" id="4H1pzUcqBDN8w4otcR3Fbk">
452 |       <mxCell style="feature" vertex="1" alternateStyle="feature;verticalAlign=middle;fontSize=56;" originalStyle="feature" alternateStyleEnabled="0" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
453 |         <mxGeometry x="2184" y="-1389.5" width="448" height="1024" as="geometry">
454 |           <mxRectangle x="2032" y="-1392" width="448" height="1024" as="alternateBounds"/>
455 |         </mxGeometry>
456 |       </mxCell>
457 |     </feature>
458 |     <ui label="&lt;div&gt;Reporting&lt;/div&gt;&lt;div&gt;&lt;hr id=&quot;null&quot;&gt;&lt;/div&gt;&amp;nbsp;&amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM464 96H345.94c-21.38 0-32.09 25.85-16.97 40.97l32.4 32.4L288 242.75l-73.37-73.37c-12.5-12.5-32.76-12.5-45.25 0l-68.69 68.69c-6.25 6.25-6.25 16.38 0 22.63l22.62 22.62c6.25 6.25 16.38 6.25 22.63 0L192 237.25l73.37 73.37c12.5 12.5 32.76 12.5 45.25 0l96-96 32.4 32.4c15.12 15.12 40.97 4.41 40.97-16.97V112c.01-8.84-7.15-16-15.99-16z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 288 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M209.2 233.4l-108-31.6C88.7 198.2 80 186.5 80 173.5c0-16.3 13.2-29.5 29.5-29.5h66.3c12.2 0 24.2 3.7 34.2 10.5 6.1 4.1 14.3 3.1 19.5-2l34.8-34c7.1-6.9 6.1-18.4-1.8-24.5C238 74.8 207.4 64.1 176 64V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48h-2.5C45.8 64-5.4 118.7.5 183.6c4.2 46.1 39.4 83.6 83.8 96.6l102.5 30c12.5 3.7 21.2 15.3 21.2 28.3 0 16.3-13.2 29.5-29.5 29.5h-66.3C100 368 88 364.3 78 357.5c-6.1-4.1-14.3-3.1-19.5 2l-34.8 34c-7.1 6.9-6.1 18.4 1.8 24.5 24.5 19.2 55.1 29.9 86.5 30v48c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-48.2c46.6-.9 90.3-28.6 105.7-72.7 21.5-61.6-14.6-124.8-72.5-141.7z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;" type="ui" id="x5fT269SR6cDZ9xpvVuhfM">
459 |       <mxCell style="ui" vertex="1" tempVisible="1" parent="4H1pzUcqBDN8w4otcR3Fbk">
460 |         <mxGeometry x="102" y="82" width="234" height="146" as="geometry"/>
461 |       </mxCell>
462 |     </ui>
463 |     <mxCell id="431h7sa45h3skuhkNfPZ63" style="html=1;" edge="1" tempVisible="1" parent="4H1pzUcqBDN8w4otcR3Fbk" source="a4Kuqbg7HkV5SmehQdzpd1" target="x5fT269SR6cDZ9xpvVuhfM">
464 |       <mxGeometry relative="1" as="geometry">
465 |         <Array as="points">
466 |           <mxPoint x="134" y="748"/>
467 |           <mxPoint x="220" y="748"/>
468 |         </Array>
469 |       </mxGeometry>
470 |     </mxCell>
471 |     <document label="Sales&amp;nbsp;&lt;div&gt;Report&lt;/div&gt;" type="document" id="a4Kuqbg7HkV5SmehQdzpd1">
472 |       <mxCell style="document" vertex="1" tempVisible="1" parent="4H1pzUcqBDN8w4otcR3Fbk">
473 |         <mxGeometry x="54" y="829" width="160" height="100" as="geometry"/>
474 |       </mxCell>
475 |     </document>
476 |     <feature label="Legend" type="feature" id="gqhruitVX7P9LZx9EoKnQa">
477 |       <mxCell style="feature" vertex="1" alternateStyle="feature;verticalAlign=middle;fontSize=56;" originalStyle="feature" alternateStyleEnabled="0" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
478 |         <mxGeometry x="-2380" y="1094" width="740" height="795" as="geometry">
479 |           <mxRectangle x="-2380" y="1094" width="740" height="795" as="alternateBounds"/>
480 |         </mxGeometry>
481 |       </mxCell>
482 |     </feature>
483 |     <ui label="UI / API / Job" type="ui" id="q8xxznCv3CYSsqWX3meQRY">
484 |       <mxCell style="ui" vertex="1" tempVisible="1" parent="gqhruitVX7P9LZx9EoKnQa">
485 |         <mxGeometry x="343" y="140" width="160" height="100" as="geometry"/>
486 |       </mxCell>
487 |     </ui>
488 |     <command label="Command" type="command" id="6VSmiCXbKu7AZhDCW3vDnu">
489 |       <mxCell style="command" vertex="1" tempVisible="1" parent="gqhruitVX7P9LZx9EoKnQa">
490 |         <mxGeometry x="343" y="300" width="160" height="100" as="geometry"/>
491 |       </mxCell>
492 |     </command>
493 |     <mxCell id="fadvR9vbHToL45n8UaYnCh" style="html=1;" edge="1" tempVisible="1" parent="gqhruitVX7P9LZx9EoKnQa" source="q8xxznCv3CYSsqWX3meQRY" target="6VSmiCXbKu7AZhDCW3vDnu">
494 |       <mxGeometry relative="1" as="geometry"/>
495 |     </mxCell>
496 |     <event label="Event" type="event" id="5ybiKTeX8FxVRUguQoD99s">
497 |       <mxCell style="event" vertex="1" tempVisible="1" parent="gqhruitVX7P9LZx9EoKnQa">
498 |         <mxGeometry x="343" y="474" width="160" height="100" as="geometry"/>
499 |       </mxCell>
500 |     </event>
501 |     <mxCell id="aQi7BJqekWEkAtMngyF7qN" style="html=1;" edge="1" tempVisible="1" parent="gqhruitVX7P9LZx9EoKnQa" source="6VSmiCXbKu7AZhDCW3vDnu" target="5ybiKTeX8FxVRUguQoD99s">
502 |       <mxGeometry relative="1" as="geometry"/>
503 |     </mxCell>
504 |     <mxCell id="3GE17eGJ1gschambyjAzSJ" style="html=1;" edge="1" tempVisible="1" parent="gqhruitVX7P9LZx9EoKnQa" source="9modYiBniZ5wdXAEZWuacf" target="q8xxznCv3CYSsqWX3meQRY">
505 |       <mxGeometry relative="1" as="geometry">
506 |         <Array as="points">
507 |           <mxPoint x="215" y="684.0000000000005"/>
508 |           <mxPoint x="215" y="190"/>
509 |         </Array>
510 |       </mxGeometry>
511 |     </mxCell>
512 |     <document label="View" type="document" id="9modYiBniZ5wdXAEZWuacf">
513 |       <mxCell style="document" vertex="1" tempVisible="1" parent="gqhruitVX7P9LZx9EoKnQa">
514 |         <mxGeometry x="343" y="634.0000000000005" width="160" height="100" as="geometry"/>
515 |       </mxCell>
516 |     </document>
517 |     <mxCell id="2bepwMkQvMhGu2KTJsv1ok" style="html=1;" edge="1" tempVisible="1" parent="gqhruitVX7P9LZx9EoKnQa" source="5ybiKTeX8FxVRUguQoD99s" target="9modYiBniZ5wdXAEZWuacf">
518 |       <mxGeometry relative="1" as="geometry"/>
519 |     </mxCell>
520 |     <feature label="State Change" type="feature" id="iWs2nfvWnSXHACDBvWzAYj">
521 |       <mxCell style="feature" vertex="1" alternateStyle="feature;verticalAlign=middle;fontSize=56;" originalStyle="feature" alternateStyleEnabled="0" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
522 |         <mxGeometry x="-1520" y="1104" width="811" height="792" as="geometry">
523 |           <mxRectangle x="-1520" y="1104" width="811" height="792" as="alternateBounds"/>
524 |         </mxGeometry>
525 |       </mxCell>
526 |     </feature>
527 |     <event label="Registered" type="event" id="cMApdQkMukaVym8L2xqBqA">
528 |       <mxCell style="event" vertex="1" tempVisible="1" parent="iWs2nfvWnSXHACDBvWzAYj">
529 |         <mxGeometry x="399" y="119" width="160" height="100" as="geometry"/>
530 |       </mxCell>
531 |     </event>
532 |     <event label="Room Added" type="event" id="vdJPawSeBrgBPWRQDdM3bj">
533 |       <mxCell style="event" vertex="1" tempVisible="1" parent="iWs2nfvWnSXHACDBvWzAYj">
534 |         <mxGeometry x="399" y="229" width="160" height="100" as="geometry"/>
535 |       </mxCell>
536 |     </event>
537 |     <command label="Book Room" type="command" id="fo8mmPYjBJ82Taq5ZxC759">
538 |       <mxCell style="command" vertex="1" tempVisible="1" parent="iWs2nfvWnSXHACDBvWzAYj">
539 |         <mxGeometry x="514" y="379" width="160" height="100" as="geometry"/>
540 |       </mxCell>
541 |     </command>
542 |     <event label="Room Booked" type="event" id="dTMhu5JRc3zwPPnCxLPdEm">
543 |       <mxCell style="event" vertex="1" tempVisible="1" parent="iWs2nfvWnSXHACDBvWzAYj">
544 |         <mxGeometry x="399" y="553" width="160" height="100" as="geometry"/>
545 |       </mxCell>
546 |     </event>
547 |     <mxCell id="kiGCH5GkfFoBZh8UVZrabd" value="&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 48px;&quot;&gt;Given&lt;/span&gt;&lt;/div&gt;" style="freeText" vertex="1" tempVisible="1" parent="iWs2nfvWnSXHACDBvWzAYj">
548 |       <mxGeometry x="47" y="140" width="235" height="158" as="geometry"/>
549 |     </mxCell>
550 |     <mxCell id="c8Qpo6MRW7UuwrR9AcGVrc" value="&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 48px;&quot;&gt;When&lt;/span&gt;&lt;/div&gt;" style="freeText" vertex="1" tempVisible="1" parent="iWs2nfvWnSXHACDBvWzAYj">
551 |       <mxGeometry x="47" y="350" width="235" height="158" as="geometry"/>
552 |     </mxCell>
553 |     <mxCell id="34CxHSGUXUvFe8iRrUhLNj" value="&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 48px;&quot;&gt;Then&lt;/span&gt;&lt;/div&gt;" style="freeText" vertex="1" tempVisible="1" parent="iWs2nfvWnSXHACDBvWzAYj">
554 |       <mxGeometry x="47" y="524" width="235" height="158" as="geometry"/>
555 |     </mxCell>
556 |     <feature label="State View" type="feature" id="x3ZMtoi8mGRQXPz2vyLKL4">
557 |       <mxCell style="feature" vertex="1" alternateStyle="feature;verticalAlign=middle;fontSize=56;" originalStyle="feature" alternateStyleEnabled="0" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
558 |         <mxGeometry x="-592" y="1134" width="804" height="773" as="geometry">
559 |           <mxRectangle x="-592" y="1134" width="804" height="773" as="alternateBounds"/>
560 |         </mxGeometry>
561 |       </mxCell>
562 |     </feature>
563 |     <event label="Payment&amp;nbsp;&lt;div&gt;Succeeded&lt;/div&gt;" type="event" id="KPyAcHjMwMCGG9sKcpQDz">
564 |       <mxCell style="event" vertex="1" tempVisible="1" parent="x3ZMtoi8mGRQXPz2vyLKL4">
565 |         <mxGeometry x="411" y="100" width="160" height="100" as="geometry"/>
566 |       </mxCell>
567 |     </event>
568 |     <event label="Payment&amp;nbsp;&lt;div&gt;Succeeded&lt;/div&gt;" type="event" id="96h85HK1LWHXQbojJQfyCY">
569 |       <mxCell style="event" vertex="1" tempVisible="1" parent="x3ZMtoi8mGRQXPz2vyLKL4">
570 |         <mxGeometry x="411" y="209.99999999999977" width="160" height="100" as="geometry"/>
571 |       </mxCell>
572 |     </event>
573 |     <document label="Sales&amp;nbsp;&lt;div&gt;Report&lt;/div&gt;" type="document" id="apEA4SeUSSM3npXvWJQu6V">
574 |       <mxCell style="document" vertex="1" tempVisible="1" parent="x3ZMtoi8mGRQXPz2vyLKL4">
575 |         <mxGeometry x="469" y="360" width="160" height="100" as="geometry"/>
576 |       </mxCell>
577 |     </document>
578 |     <mxCell id="3NCuwL4eV4H9MDgwvy68Jx" value="&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 48px;&quot;&gt;Given&lt;/span&gt;&lt;/div&gt;" style="freeText" vertex="1" tempVisible="1" parent="x3ZMtoi8mGRQXPz2vyLKL4">
579 |       <mxGeometry x="68.5" y="121" width="235" height="158" as="geometry"/>
580 |     </mxCell>
581 |     <mxCell id="ibTmSCz9m3H1C1aMnMAZgC" value="&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 48px;&quot;&gt;Then&lt;/span&gt;&lt;/div&gt;" style="freeText" vertex="1" tempVisible="1" parent="x3ZMtoi8mGRQXPz2vyLKL4">
582 |       <mxGeometry x="68.5" y="355" width="235" height="158" as="geometry"/>
583 |     </mxCell>
584 |     <feature label="External State Input" type="feature" id="4Ss41PsZM5CwYqhbYGsdUd">
585 |       <mxCell style="feature" vertex="1" alternateStyle="feature;verticalAlign=middle;fontSize=56;" originalStyle="feature" alternateStyleEnabled="0" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
586 |         <mxGeometry x="288" y="1149" width="1211" height="758" as="geometry">
587 |           <mxRectangle x="288" y="1149" width="1211" height="758" as="alternateBounds"/>
588 |         </mxGeometry>
589 |       </mxCell>
590 |     </feature>
591 |     <event label="GPS&amp;nbsp;&lt;div&gt;Update&lt;/div&gt;" type="event" id="sL8iGZF3QC6jdvjK5zCaDi">
592 |       <mxCell style="event" vertex="1" tempVisible="1" parent="4Ss41PsZM5CwYqhbYGsdUd">
593 |         <mxGeometry x="389" y="95.00000000000023" width="160" height="100" as="geometry"/>
594 |       </mxCell>
595 |     </event>
596 |     <event label="GPS&amp;nbsp;&lt;div&gt;Update&lt;/div&gt;" type="event" id="7YwvhNBTfgy79QFF62exju">
597 |       <mxCell style="event" vertex="1" tempVisible="1" parent="4Ss41PsZM5CwYqhbYGsdUd">
598 |         <mxGeometry x="574.5" y="95.00000000000023" width="160" height="100" as="geometry"/>
599 |       </mxCell>
600 |     </event>
601 |     <event label="GPS&amp;nbsp;&lt;div&gt;Update&lt;/div&gt;" type="event" id="mh2zYv7b3dsCt25svF7ZYE">
602 |       <mxCell style="event" vertex="1" tempVisible="1" parent="4Ss41PsZM5CwYqhbYGsdUd">
603 |         <mxGeometry x="773" y="95" width="160" height="100" as="geometry"/>
604 |       </mxCell>
605 |     </event>
606 |     <event label="GPS&amp;nbsp;&lt;div&gt;Update&lt;/div&gt;" type="event" id="kr4NU6dzsF9nhnPtSGwwhY">
607 |       <mxCell style="event" vertex="1" tempVisible="1" parent="4Ss41PsZM5CwYqhbYGsdUd">
608 |         <mxGeometry x="965" y="95" width="160" height="100" as="geometry"/>
609 |       </mxCell>
610 |     </event>
611 |     <mxCell id="n5jn8cLXfUprZE15BKmTnd" value="&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 48px;&quot;&gt;Given&lt;/span&gt;&lt;/div&gt;" style="freeText" vertex="1" tempVisible="1" parent="4Ss41PsZM5CwYqhbYGsdUd">
612 |       <mxGeometry x="43" y="66" width="235" height="158" as="geometry"/>
613 |     </mxCell>
614 |     <command label="Translate&lt;div&gt;To Location&lt;/div&gt;" type="command" id="avHXrLa8B7y4k39EzQvTxu">
615 |       <mxCell style="command" vertex="1" tempVisible="1" parent="4Ss41PsZM5CwYqhbYGsdUd">
616 |         <mxGeometry x="658" y="290" width="160" height="100" as="geometry"/>
617 |       </mxCell>
618 |     </command>
619 |     <mxCell id="bCFcGhsFvNHpvYWyArpkaf" value="&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 48px;&quot;&gt;When&lt;/span&gt;&lt;/div&gt;" style="freeText" vertex="1" tempVisible="1" parent="4Ss41PsZM5CwYqhbYGsdUd">
620 |       <mxGeometry x="43" y="245" width="235" height="158" as="geometry"/>
621 |     </mxCell>
622 |     <event label="Entered&lt;div&gt;Hotel&lt;/div&gt;" type="event" id="5NgtTy6UC1kJ6qAeg6Lke">
623 |       <mxCell style="event" vertex="1" tempVisible="1" parent="4Ss41PsZM5CwYqhbYGsdUd">
624 |         <mxGeometry x="498" y="479" width="160" height="100" as="geometry"/>
625 |       </mxCell>
626 |     </event>
627 |     <event label="Exited&lt;div&gt;Hotel&lt;/div&gt;" type="event" id="2E3JbiGWVgAppUdDELDVtT">
628 |       <mxCell style="event" vertex="1" tempVisible="1" parent="4Ss41PsZM5CwYqhbYGsdUd">
629 |         <mxGeometry x="818" y="474" width="160" height="100" as="geometry"/>
630 |       </mxCell>
631 |     </event>
632 |     <mxCell id="aswjbUSQu3yiGgnViLG5U7" value="&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 48px;&quot;&gt;Then&lt;/span&gt;&lt;/div&gt;" style="freeText" vertex="1" tempVisible="1" parent="4Ss41PsZM5CwYqhbYGsdUd">
633 |       <mxGeometry x="43" y="445" width="235" height="158" as="geometry"/>
634 |     </mxCell>
635 |     <feature label="External State Output" type="feature" id="t59yBUZAm3v2wmiJ2cV6jP">
636 |       <mxCell style="feature" vertex="1" alternateStyle="feature;verticalAlign=middle;fontSize=56;" originalStyle="feature" alternateStyleEnabled="0" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
637 |         <mxGeometry x="1600" y="1155" width="971" height="752" as="geometry">
638 |           <mxRectangle x="1600" y="1155" width="971" height="752" as="alternateBounds"/>
639 |         </mxGeometry>
640 |       </mxCell>
641 |     </feature>
642 |     <document label="Stay&amp;nbsp;&lt;div&gt;Notifications to&lt;/div&gt;&lt;div&gt;Send&lt;/div&gt;" type="document" id="8rjHK5nEXi6jx84VqJEFK6">
643 |       <mxCell style="document" vertex="1" tempVisible="1" parent="t59yBUZAm3v2wmiJ2cV6jP">
644 |         <mxGeometry x="561.5" y="93.99999999999977" width="160" height="100" as="geometry"/>
645 |       </mxCell>
646 |     </document>
647 |     <command label="Send&lt;div&gt;Notification&lt;/div&gt;" type="command" id="f3HoBEgXXyWNB9UVj3TEzo">
648 |       <mxCell style="command" vertex="1" tempVisible="1" parent="t59yBUZAm3v2wmiJ2cV6jP">
649 |         <mxGeometry x="562" y="284" width="160" height="100" as="geometry"/>
650 |       </mxCell>
651 |     </command>
652 |     <event label="Notification&lt;div&gt;Sent&lt;/div&gt;" type="event" id="eo8rEj21BxBQNqXCtpd6yV">
653 |       <mxCell style="event" vertex="1" tempVisible="1" parent="t59yBUZAm3v2wmiJ2cV6jP">
654 |         <mxGeometry x="402" y="468" width="160" height="100" as="geometry"/>
655 |       </mxCell>
656 |     </event>
657 |     <event label="Notification&lt;div&gt;Failed&lt;/div&gt;" type="event" id="roChoRng2eVP6oHCTiUzgc">
658 |       <mxCell style="event" vertex="1" tempVisible="1" parent="t59yBUZAm3v2wmiJ2cV6jP">
659 |         <mxGeometry x="722" y="468" width="160" height="100" as="geometry"/>
660 |       </mxCell>
661 |     </event>
662 |     <mxCell id="9HZ3PfehQy1E7yD6GS2Go7" value="&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 48px;&quot;&gt;Given&lt;/span&gt;&lt;/div&gt;" style="freeText" vertex="1" tempVisible="1" parent="t59yBUZAm3v2wmiJ2cV6jP">
663 |       <mxGeometry x="60.5" y="36" width="235" height="158" as="geometry"/>
664 |     </mxCell>
665 |     <mxCell id="mtnmK3weC7ZN98KSQ5VKcP" value="&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 48px;&quot;&gt;When&lt;/span&gt;&lt;/div&gt;" style="freeText" vertex="1" tempVisible="1" parent="t59yBUZAm3v2wmiJ2cV6jP">
666 |       <mxGeometry x="62" y="215" width="235" height="158" as="geometry"/>
667 |     </mxCell>
668 |     <mxCell id="YtKr1tSn9FKHZ74TCttch" value="&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 48px;&quot;&gt;Then&lt;/span&gt;&lt;/div&gt;" style="freeText" vertex="1" tempVisible="1" parent="t59yBUZAm3v2wmiJ2cV6jP">
669 |       <mxGeometry x="62" y="415" width="235" height="158" as="geometry"/>
670 |     </mxCell>
671 |     <boundedContext label="Introduction" type="boundedContext" id="7ouPwWnAxNabcZ9icJgjjT">
672 |       <mxCell style="boundedContext;fontSize=78;" vertex="1" alternateStyle="boundedContext;verticalAlign=middle;fontSize=112;" originalStyle="boundedContext" alternateStyleEnabled="0" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
673 |         <mxGeometry x="-5032" y="-1458" width="1456" height="3514" as="geometry">
674 |           <mxRectangle x="-5280" y="-1386" width="1456" height="3514" as="alternateBounds"/>
675 |         </mxGeometry>
676 |       </mxCell>
677 |     </boundedContext>
678 |     <feature label="Hi&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C38 405.7 7 439.1 6.5 439.5c-6.6 7-8.4 17.2-4.6 26S14.4 480 24 480c61.5 0 110-25.7 139.1-46.3C192 442.8 223.2 448 256 448c141.4 0 256-93.1 256-208S397.4 32 256 32zm0 368c-26.7 0-53.1-4.1-78.4-12.1l-22.7-7.2-19.5 13.8c-14.3 10.1-33.9 21.4-57.5 29 7.3-12.1 14.4-25.7 19.9-40.2l10.6-28.1-20.6-21.8C69.7 314.1 48 282.2 48 240c0-88.2 93.3-160 208-160s208 71.8 208 160-93.3 160-208 160z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;" type="feature" id="3PMAQ7qzmKd7HJRVccaFUL">
679 |       <mxCell style="feature" vertex="1" alternateStyle="feature;verticalAlign=middle;fontSize=56;" originalStyle="feature" alternateStyleEnabled="0" tempVisible="1" parent="7ouPwWnAxNabcZ9icJgjjT">
680 |         <mxGeometry x="248" y="217" width="960" height="304" as="geometry">
681 |           <mxRectangle x="304" y="256" width="960" height="304" as="alternateBounds"/>
682 |         </mxGeometry>
683 |       </mxCell>
684 |     </feature>
685 |     <mxCell id="6TPZgdgYCEBym3uj7ZmGqj" value="&lt;span&gt;&lt;font style=&quot;font-size: 18px;&quot;&gt;This is an Event Modeling example board. The hotel example is taken from&amp;nbsp;&lt;a href=&quot;https://eventmodeling.org/posts/what-is-event-modeling/&quot;&gt;https://eventmodeling.org/posts/what-is-event-modeling/&lt;/a&gt;&lt;/font&gt;&lt;/span&gt;" style="freeText;fillColor=#FFCC99;" vertex="1" tempVisible="1" parent="3PMAQ7qzmKd7HJRVccaFUL">
686 |       <mxGeometry x="72" y="110" width="816" height="114" as="geometry"/>
687 |     </mxCell>
688 |     <feature label="Preface&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M352 96c0-53.02-42.98-96-96-96s-96 42.98-96 96 42.98 96 96 96 96-42.98 96-96zM233.59 241.1c-59.33-36.32-155.43-46.3-203.79-49.05C13.55 191.13 0 203.51 0 219.14v222.8c0 14.33 11.59 26.28 26.49 27.05 43.66 2.29 131.99 10.68 193.04 41.43 9.37 4.72 20.48-1.71 20.48-11.87V252.56c-.01-4.67-2.32-8.95-6.42-11.46zm248.61-49.05c-48.35 2.74-144.46 12.73-203.78 49.05-4.1 2.51-6.41 6.96-6.41 11.63v245.79c0 10.19 11.14 16.63 20.54 11.9 61.04-30.72 149.32-39.11 192.97-41.4 14.9-.78 26.49-12.73 26.49-27.06V219.14c-.01-15.63-13.56-28.01-29.81-27.09z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;" type="feature" id="moR7NMd3Pzmp33Zo9oUrUG">
689 |       <mxCell style="feature" vertex="1" alternateStyle="feature;verticalAlign=middle;fontSize=56;" originalStyle="feature" alternateStyleEnabled="0" tempVisible="1" parent="7ouPwWnAxNabcZ9icJgjjT">
690 |         <mxGeometry x="248" y="602" width="960" height="422" as="geometry">
691 |           <mxRectangle x="248" y="602" width="960" height="422" as="alternateBounds"/>
692 |         </mxGeometry>
693 |       </mxCell>
694 |     </feature>
695 |     <mxCell id="2MSR44wqSUssoen3gejkmP" value="&lt;div&gt;&lt;font style=&quot;font-size: 18px;&quot;&gt;The original example that you can find on the website linked above was created with Miro/Realtimeboard. Our version is very similar but contains some additions. We&#39;ve added feature frames&amp;nbsp;to vertically slice through the swim lanes and group features/use cases. On this small example board the effect isn&#39;t that big, but with more content on the board, features will help you navigate and keep an overview. Check out the context tree on the left sidebar to see the effect.&lt;/font&gt;&lt;br&gt;&lt;/div&gt;" style="freeText;fillColor=#FFCC99;" vertex="1" tempVisible="1" parent="moR7NMd3Pzmp33Zo9oUrUG">
696 |       <mxGeometry x="72" y="88" width="816" height="264" as="geometry"/>
697 |     </mxCell>
698 |     <feature label="When To Use&amp;nbsp; &amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 576 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M573.19 402.67l-139.79-320C428.43 71.29 417.6 64 405.68 64h-97.59l2.45 23.16c.5 4.72-3.21 8.84-7.96 8.84h-29.16c-4.75 0-8.46-4.12-7.96-8.84L267.91 64h-97.59c-11.93 0-22.76 7.29-27.73 18.67L2.8 402.67C-6.45 423.86 8.31 448 30.54 448h196.84l10.31-97.68c.86-8.14 7.72-14.32 15.91-14.32h68.8c8.19 0 15.05 6.18 15.91 14.32L348.62 448h196.84c22.23 0 36.99-24.14 27.73-45.33zM260.4 135.16a8 8 0 0 1 7.96-7.16h39.29c4.09 0 7.53 3.09 7.96 7.16l4.6 43.58c.75 7.09-4.81 13.26-11.93 13.26h-40.54c-7.13 0-12.68-6.17-11.93-13.26l4.59-43.58zM315.64 304h-55.29c-9.5 0-16.91-8.23-15.91-17.68l5.07-48c.86-8.14 7.72-14.32 15.91-14.32h45.15c8.19 0 15.05 6.18 15.91 14.32l5.07 48c1 9.45-6.41 17.68-15.91 17.68z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;" type="feature" id="q5SdD3cQemzGXMpomP2rH5">
699 |       <mxCell style="feature" vertex="1" alternateStyle="feature;verticalAlign=middle;fontSize=56;" originalStyle="feature" alternateStyleEnabled="0" tempVisible="1" parent="7ouPwWnAxNabcZ9icJgjjT">
700 |         <mxGeometry x="248" y="1109" width="960" height="683" as="geometry">
701 |           <mxRectangle x="248" y="1109" width="960" height="683" as="alternateBounds"/>
702 |         </mxGeometry>
703 |       </mxCell>
704 |     </feature>
705 |     <mxCell id="k9d8huziGrBJooN5b2izkL" value="&lt;div&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;Event Modeling came out while we were already working on and with prooph board. It heavily influenced the way we organize stickies on the board. Our best practice is documented on the &amp;nbsp;&lt;a href=&quot;https://free.prooph-board.com/inspectio/boards/import/https%3A%2F%2Fraw.githubusercontent.com%2Fevent-engine%2Finspectio%2Fmaster%2Fassets%2FExample%2520Boards%2Fprooph%20board%2520Example.xml&quot;&gt;example prooph board&lt;/a&gt;. Make sure to check it out.&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;However, our approach is focused&amp;nbsp;on Design-Level Event Storming since we use Bounded Contexts, Aggregates and Hot Spots. Event Modeling on the other hand wants to minimize the number of required stickies (and therefor concepts) to make communication with business people as simple as possible. This moves some information back to the implementation, for example what piece of code handles a command. What are the business rules and so on.&amp;nbsp;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;&amp;nbsp;For us there is no clear winner at the moment. The simplicity of Event Modeling is definitely an advantage. On the other hand some details are missing that we usually discuss before implementing them. So it&#39;s a team choice what you prefer. It might also make sense to combine the approaches:&amp;nbsp;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;You can start with Big Picture Event Storming. After that use Event Modeling to explore details together with domain experts, UX Designer, .... Once boundaries are clear (the swim lanes in Event Modeling), each team can use Design-Level Event Storming to work out and discuss implementation details.&lt;/span&gt;&lt;/div&gt;" style="freeText;fillColor=#FFCC99;" vertex="1" tempVisible="1" parent="q5SdD3cQemzGXMpomP2rH5">
706 |       <mxGeometry x="72" y="88" width="816" height="536" as="geometry"/>
707 |     </mxCell>
708 |     <feature label="How To&amp;nbsp; &amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 640 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M512.1 191l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0L552 6.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zm-10.5-58.8c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.7-82.4 14.3-52.8 52.8zM386.3 286.1l33.7 16.8c10.1 5.8 14.5 18.1 10.5 29.1-8.9 24.2-26.4 46.4-42.6 65.8-7.4 8.9-20.2 11.1-30.3 5.3l-29.1-16.8c-16 13.7-34.6 24.6-54.9 31.7v33.6c0 11.6-8.3 21.6-19.7 23.6-24.6 4.2-50.4 4.4-75.9 0-11.5-2-20-11.9-20-23.6V418c-20.3-7.2-38.9-18-54.9-31.7L74 403c-10 5.8-22.9 3.6-30.3-5.3-16.2-19.4-33.3-41.6-42.2-65.7-4-10.9.4-23.2 10.5-29.1l33.3-16.8c-3.9-20.9-3.9-42.4 0-63.4L12 205.8c-10.1-5.8-14.6-18.1-10.5-29 8.9-24.2 26-46.4 42.2-65.8 7.4-8.9 20.2-11.1 30.3-5.3l29.1 16.8c16-13.7 34.6-24.6 54.9-31.7V57.1c0-11.5 8.2-21.5 19.6-23.5 24.6-4.2 50.5-4.4 76-.1 11.5 2 20 11.9 20 23.6v33.6c20.3 7.2 38.9 18 54.9 31.7l29.1-16.8c10-5.8 22.9-3.6 30.3 5.3 16.2 19.4 33.2 41.6 42.1 65.8 4 10.9.1 23.2-10 29.1l-33.7 16.8c3.9 21 3.9 42.5 0 63.5zm-117.6 21.1c59.2-77-28.7-164.9-105.7-105.7-59.2 77 28.7 164.9 105.7 105.7zm243.4 182.7l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0l8.2-14.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zM501.6 431c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.6-82.4 14.3-52.8 52.8z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;" type="feature" id="harsVNoYji7wgVoE3WYmTY">
709 |       <mxCell style="feature" vertex="1" alternateStyle="feature;verticalAlign=middle;fontSize=56;" originalStyle="feature" alternateStyleEnabled="0" tempVisible="1" parent="7ouPwWnAxNabcZ9icJgjjT">
710 |         <mxGeometry x="248" y="1866" width="960" height="966" as="geometry">
711 |           <mxRectangle x="248" y="1866" width="960" height="966" as="alternateBounds"/>
712 |         </mxGeometry>
713 |       </mxCell>
714 |     </feature>
715 |     <mxCell id="iVU6LUisZKG8w6fgpAaHkJ" value="&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;Swim lanes are not part of the basic tool set in prooph board. We try to minimize the number of elements available (see reasons below -&amp;gt; Good to know)&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;Here is how we did it:&amp;nbsp;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;1) The timeline starts with a dot icon.&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;2) It ends with a comment box that contains the word &quot;time&quot;.&amp;nbsp;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;3) In between the two is a connector arrow.&amp;nbsp;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;4) The&lt;/span&gt;&lt;span&gt;&lt;font style=&quot;font-size: 18px;&quot;&gt;&amp;nbsp;height of the &quot;time&quot; comment box is the same as the entire height of the diagram, but it has no border and a transparent bg. Line breaks are used to vertically align the word &quot;time&quot; with the timeline arrow.&lt;/font&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span&gt;&lt;font style=&quot;font-size: 18px;&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;font size=&quot;3&quot;&gt;5) &lt;/font&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;The swim lanes are created the same. Each starts with a comment box that holds the label of the swim lane.&amp;nbsp;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;6) An arrow connects the label with the &quot;time&quot; comment.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;7) The dashed style of the arrows can be chosen from the context menu (right click on an arrow).&amp;nbsp;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;&lt;i&gt;Please note: It&#39;s planned to move arrow styling into a format toolbar. So this is subject to change, like other usability aspects of prooph board.&lt;/i&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;text-align: center;&quot;&gt;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;i style=&quot;text-align: center;&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 192 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M176 432c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80zM25.26 25.199l13.6 272C39.499 309.972 50.041 320 62.83 320h66.34c12.789 0 23.331-10.028 23.97-22.801l13.6-272C167.425 11.49 156.496 0 142.77 0H49.23C35.504 0 24.575 11.49 25.26 25.199z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&lt;span style=&quot;text-align: center;&quot;&gt;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;The &quot;time&quot; comment box trick has the advantage that all arrows are connected with it. If you need to expand the timeline, just move the &quot;time&quot; comment to the right and all arrows and therefor all swim lanes will be resized accordingly.&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;&lt;i&gt;Instead of swim lanes you could also use the bounded context frames. We do this on one of our production boards to get the advantage of better readability in the &quot;bird view&quot; (zoomed out) and grouping in the context tree.&lt;/i&gt;&lt;/span&gt;&lt;/div&gt;" style="freeText;fillColor=#FFCC99;" vertex="1" tempVisible="1" parent="harsVNoYji7wgVoE3WYmTY">
716 |       <mxGeometry x="72" y="88" width="816" height="776" as="geometry"/>
717 |     </mxCell>
718 |     <feature label="Good To Know&amp;nbsp;&amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 480 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M471.99 334.43L336.06 256l135.93-78.43c7.66-4.42 10.28-14.2 5.86-21.86l-32.02-55.43c-4.42-7.65-14.21-10.28-21.87-5.86l-135.93 78.43V16c0-8.84-7.17-16-16.01-16h-64.04c-8.84 0-16.01 7.16-16.01 16v156.86L56.04 94.43c-7.66-4.42-17.45-1.79-21.87 5.86L2.15 155.71c-4.42 7.65-1.8 17.44 5.86 21.86L143.94 256 8.01 334.43c-7.66 4.42-10.28 14.21-5.86 21.86l32.02 55.43c4.42 7.65 14.21 10.27 21.87 5.86l135.93-78.43V496c0 8.84 7.17 16 16.01 16h64.04c8.84 0 16.01-7.16 16.01-16V339.14l135.93 78.43c7.66 4.42 17.45 1.8 21.87-5.86l32.02-55.43c4.42-7.65 1.8-17.43-5.86-21.85z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;" type="feature" id="bqRgdCiUhgPWCdewto6PRm">
719 |       <mxCell style="feature" vertex="1" alternateStyle="feature;verticalAlign=middle;fontSize=56;" originalStyle="feature" alternateStyleEnabled="0" tempVisible="1" parent="7ouPwWnAxNabcZ9icJgjjT">
720 |         <mxGeometry x="248" y="2917" width="960" height="492" as="geometry">
721 |           <mxRectangle x="248" y="2917" width="960" height="492" as="alternateBounds"/>
722 |         </mxGeometry>
723 |       </mxCell>
724 |     </feature>
725 |     <mxCell id="azWdo37xjwW8jANySM7XJo" value="&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;You might wonder why prooph board does not simply offer some more drawing options. The reason for that is the same as why Event Modeling wants to reduce the number of sticky types: &lt;b&gt;simplicity&lt;/b&gt;. The less you have to think about how you display information, the more you can concentrate on the business problems and proper solutions.&amp;nbsp;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;prooph board is &lt;b&gt;not&lt;/b&gt; meant to be a drawing or general purpose diagramming tool. The provided elements all have a specific meaning. This allows us to analyze the content of a board and provide features that a general purpose online whiteboarding tool cannot provide. The context tree on the sidebar is one example. We have much more in the pipeline, like code generation, project management stuff and so on.&lt;/span&gt;&lt;br&gt;&lt;/div&gt;" style="freeText;fillColor=#FFCC99;" vertex="1" tempVisible="1" parent="bqRgdCiUhgPWCdewto6PRm">
726 |       <mxGeometry x="72" y="88" width="816" height="312" as="geometry"/>
727 |     </mxCell>
728 |     <mxCell id="4qo7mCMGJm15zgku4Zd2Yi" style="html=1;" edge="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78" source="8U5XryAcMLjW2gqEgaGmwF" target="tH9XwwHAMWrBnjJRpvSsn8">
729 |       <mxGeometry relative="1" as="geometry">
730 |         <Array as="points">
731 |           <mxPoint x="31" y="-252"/>
732 |           <mxPoint x="31" y="-657"/>
733 |           <mxPoint x="431" y="-657"/>
734 |           <mxPoint x="431" y="-512"/>
735 |         </Array>
736 |       </mxGeometry>
737 |     </mxCell>
738 |   </root>
739 | </mxGraphModel>
740 | 


--------------------------------------------------------------------------------
/assets/Example Boards/The Picture.xml:
--------------------------------------------------------------------------------
  1 | <mxGraphModel dx="1735.73" dy="1275.52" grid="1" gridSize="16" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" pageScale="1" pageWidth="827" pageHeight="1169" background="#ffffff">
  2 |   <root>
  3 |     <mxCell id="e975feae-1579-4c09-98d0-98cbf2108aec"/>
  4 |     <mxCell id="7fe80d19-d317-4e9d-8296-96c598786d78" parent="e975feae-1579-4c09-98d0-98cbf2108aec"/>
  5 |     <mxCell id="v2TmYgyJbH3fbSGaaZAnin" style="html=1;dashed=1;" edge="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78" source="8Dvumkkz4HSyC3J44aQik" target="5h3JkGQGGmqSp5NivxpJZh">
  6 |       <mxGeometry relative="1" as="geometry"/>
  7 |     </mxCell>
  8 |     <mxCell id="8Dvumkkz4HSyC3J44aQik" value="&lt;img src=&quot;data:image/svg+xml;utf8,&lt;svg aria-hidden=&amp;quot;true&amp;quot; focusable=&amp;quot;false&amp;quot; data-prefix=&amp;quot;fas&amp;quot; data-icon=&amp;quot;globe-europe&amp;quot; role=&amp;quot;img&amp;quot; xmlns=&amp;quot;http://www.w3.org/2000/svg&amp;quot; viewBox=&amp;quot;0 0 496 512&amp;quot; class=&amp;quot;svg-inline--fa fa-globe-europe fa-w-16 fa-3x&amp;quot;&gt;&lt;path fill=&amp;quot;currentColor&amp;quot; d=&amp;quot;M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm200 248c0 22.5-3.9 44.2-10.8 64.4h-20.3c-4.3 0-8.4-1.7-11.4-4.8l-32-32.6c-4.5-4.6-4.5-12.1.1-16.7l12.5-12.5v-8.7c0-3-1.2-5.9-3.3-8l-9.4-9.4c-2.1-2.1-5-3.3-8-3.3h-16c-6.2 0-11.3-5.1-11.3-11.3 0-3 1.2-5.9 3.3-8l9.4-9.4c2.1-2.1 5-3.3 8-3.3h32c6.2 0 11.3-5.1 11.3-11.3v-9.4c0-6.2-5.1-11.3-11.3-11.3h-36.7c-8.8 0-16 7.2-16 16v4.5c0 6.9-4.4 13-10.9 15.2l-31.6 10.5c-3.3 1.1-5.5 4.1-5.5 7.6v2.2c0 4.4-3.6 8-8 8h-16c-4.4 0-8-3.6-8-8s-3.6-8-8-8H247c-3 0-5.8 1.7-7.2 4.4l-9.4 18.7c-2.7 5.4-8.2 8.8-14.3 8.8H194c-8.8 0-16-7.2-16-16V199c0-4.2 1.7-8.3 4.7-11.3l20.1-20.1c4.6-4.6 7.2-10.9 7.2-17.5 0-3.4 2.2-6.5 5.5-7.6l40-13.3c1.7-.6 3.2-1.5 4.4-2.7l26.8-26.8c2.1-2.1 3.3-5 3.3-8 0-6.2-5.1-11.3-11.3-11.3H258l-16 16v8c0 4.4-3.6 8-8 8h-16c-4.4 0-8-3.6-8-8v-20c0-2.5 1.2-4.9 3.2-6.4l28.9-21.7c1.9-.1 3.8-.3 5.7-.3C358.3 56 448 145.7 448 256zM130.1 149.1c0-3 1.2-5.9 3.3-8l25.4-25.4c2.1-2.1 5-3.3 8-3.3 6.2 0 11.3 5.1 11.3 11.3v16c0 3-1.2 5.9-3.3 8l-9.4 9.4c-2.1 2.1-5 3.3-8 3.3h-16c-6.2 0-11.3-5.1-11.3-11.3zm128 306.4v-7.1c0-8.8-7.2-16-16-16h-20.2c-10.8 0-26.7-5.3-35.4-11.8l-22.2-16.7c-11.5-8.6-18.2-22.1-18.2-36.4v-23.9c0-16 8.4-30.8 22.1-39l42.9-25.7c7.1-4.2 15.2-6.5 23.4-6.5h31.2c10.9 0 21.4 3.9 29.6 10.9l43.2 37.1h18.3c8.5 0 16.6 3.4 22.6 9.4l17.3 17.3c3.4 3.4 8.1 5.3 12.9 5.3H423c-32.4 58.9-93.8 99.5-164.9 103.1z&amp;quot; class=&amp;quot;&amp;quot;&gt;&lt;/path&gt;&lt;/svg&gt;&quot; width=&quot;145&quot; height=&quot;150&quot;&gt;" style="freeText" vertex="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
  9 |       <mxGeometry x="-960" y="114" width="208" height="174" as="geometry"/>
 10 |     </mxCell>
 11 |     <mxCell id="rQDPo79SBR4QZXACYWR8WC" value="&lt;div&gt;&lt;b&gt;&lt;u&gt;UX&lt;/u&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;&amp;nbsp;&amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 576 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M208 0c-29.87 0-54.74 20.55-61.8 48.22-.75-.02-1.45-.22-2.2-.22-35.34 0-64 28.65-64 64 0 4.84.64 9.51 1.66 14.04C52.54 138 32 166.57 32 200c0 12.58 3.16 24.32 8.34 34.91C16.34 248.72 0 274.33 0 304c0 33.34 20.42 61.88 49.42 73.89-.9 4.57-1.42 9.28-1.42 14.11 0 39.76 32.23 72 72 72 4.12 0 8.1-.55 12.03-1.21C141.61 491.31 168.25 512 200 512c39.77 0 72-32.24 72-72V205.45c-10.91 8.98-23.98 15.45-38.36 18.39-4.97 1.02-9.64-2.82-9.64-7.89v-16.18c0-3.57 2.35-6.78 5.8-7.66 24.2-6.16 42.2-27.95 42.2-54.04V64c0-35.35-28.66-64-64-64zm368 304c0-29.67-16.34-55.28-40.34-69.09 5.17-10.59 8.34-22.33 8.34-34.91 0-33.43-20.54-62-49.66-73.96 1.02-4.53 1.66-9.2 1.66-14.04 0-35.35-28.66-64-64-64-.75 0-1.45.2-2.2.22C422.74 20.55 397.87 0 368 0c-35.34 0-64 28.65-64 64v74.07c0 26.09 17.99 47.88 42.2 54.04 3.46.88 5.8 4.09 5.8 7.66v16.18c0 5.07-4.68 8.91-9.64 7.89-14.38-2.94-27.44-9.41-38.36-18.39V440c0 39.76 32.23 72 72 72 31.75 0 58.39-20.69 67.97-49.21 3.93.67 7.91 1.21 12.03 1.21 39.77 0 72-32.24 72-72 0-4.83-.52-9.54-1.42-14.11 29-12.01 49.42-40.55 49.42-73.89z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;&lt;div&gt;vs.&lt;/div&gt;&lt;div&gt;&lt;font color=&quot;#ff3333&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font color=&quot;#ff3333&quot;&gt;&amp;nbsp;&amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;&lt;/font&gt;&lt;br&gt;&lt;/div&gt;" style="freeText;fillColor=#FFDED9;" vertex="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
 12 |       <mxGeometry x="-713" y="-278" width="100" height="187" as="geometry"/>
 13 |     </mxCell>
 14 |     <mxCell id="im77rnr6gemWTZP5cMvLvG" style="html=1;dashed=1;" edge="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78" source="5h3JkGQGGmqSp5NivxpJZh" target="wde8brUEpPm6XgQSvNnRCk">
 15 |       <mxGeometry relative="1" as="geometry">
 16 |         <Array as="points">
 17 |           <mxPoint x="-464" y="-188"/>
 18 |           <mxPoint x="-464" y="-188"/>
 19 |         </Array>
 20 |       </mxGeometry>
 21 |     </mxCell>
 22 |     <role label="&amp;nbsp;&amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 448 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;" type="role" id="5h3JkGQGGmqSp5NivxpJZh">
 23 |       <mxCell style="role" vertex="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
 24 |         <mxGeometry x="-621" y="-229.5" width="70" height="90" as="geometry"/>
 25 |       </mxCell>
 26 |     </role>
 27 |     <boundedContext label="System" type="boundedContext" id="7muMXvu1Wq24V4LsqQHxPN">
 28 |       <mxCell style="boundedContext;fontSize=78;" vertex="1" alternateStyle="boundedContext;verticalAlign=middle;fontSize=112;" originalStyle="boundedContext" alternateStyleEnabled="0" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
 29 |         <mxGeometry x="-464" y="-640" width="1520" height="1328" as="geometry">
 30 |           <mxRectangle x="-464" y="-640" width="1520" height="1328" as="alternateBounds"/>
 31 |         </mxGeometry>
 32 |       </mxCell>
 33 |     </boundedContext>
 34 |     <feature label="Write Model" type="feature" id="4GJrVwEMmvoVkMnxbRhhnS">
 35 |       <mxCell style="feature" vertex="1" alternateStyle="feature;verticalAlign=middle;fontSize=56;" originalStyle="feature" alternateStyleEnabled="0" parent="7muMXvu1Wq24V4LsqQHxPN">
 36 |         <mxGeometry x="256" y="221" width="959" height="451" as="geometry">
 37 |           <mxRectangle x="256" y="221" width="959" height="451" as="alternateBounds"/>
 38 |         </mxGeometry>
 39 |       </mxCell>
 40 |     </feature>
 41 |     <mxCell id="sTKrcGXVhjbj4vJeCd7mTV" style="html=1;dashed=1;" edge="1" parent="4GJrVwEMmvoVkMnxbRhhnS" source="9SPFgQjsqpsqrunv1ptqGu" target="jE4AvQ7dmH12zqigFDik3r" tempVisible="1">
 42 |       <mxGeometry relative="1" as="geometry">
 43 |         <Array as="points">
 44 |           <mxPoint x="799" y="243"/>
 45 |           <mxPoint x="799" y="243"/>
 46 |         </Array>
 47 |       </mxGeometry>
 48 |     </mxCell>
 49 |     <event label="A State Transition happened somewhere" type="event" id="9SPFgQjsqpsqrunv1ptqGu">
 50 |       <mxCell style="event" vertex="1" parent="4GJrVwEMmvoVkMnxbRhhnS" tempVisible="1">
 51 |         <mxGeometry x="703" y="295" width="182" height="114" as="geometry"/>
 52 |       </mxCell>
 53 |     </event>
 54 |     <mxCell id="aka55SoJLzAsCWJTCe4v2u" style="html=1;dashed=1;" edge="1" parent="4GJrVwEMmvoVkMnxbRhhnS" source="wde8brUEpPm6XgQSvNnRCk" target="rDh7Exwzt8yUvpTUyitgha" tempVisible="1">
 55 |       <mxGeometry relative="1" as="geometry">
 56 |         <Array as="points">
 57 |           <mxPoint x="271" y="232"/>
 58 |           <mxPoint x="271" y="232"/>
 59 |         </Array>
 60 |       </mxGeometry>
 61 |     </mxCell>
 62 |     <command label="Decision" type="command" id="wde8brUEpPm6XgQSvNnRCk">
 63 |       <mxCell style="command" vertex="1" parent="4GJrVwEMmvoVkMnxbRhhnS" tempVisible="1">
 64 |         <mxGeometry x="48" y="173" width="184" height="116" as="geometry"/>
 65 |       </mxCell>
 66 |     </command>
 67 |     <mxCell id="diwfNzbci9XGhZn4MA124S" style="html=1;dashed=1;" edge="1" parent="4GJrVwEMmvoVkMnxbRhhnS" source="rDh7Exwzt8yUvpTUyitgha" target="9SPFgQjsqpsqrunv1ptqGu" tempVisible="1">
 68 |       <mxGeometry relative="1" as="geometry">
 69 |         <Array as="points">
 70 |           <mxPoint x="478" y="352"/>
 71 |         </Array>
 72 |       </mxGeometry>
 73 |     </mxCell>
 74 |     <aggregate label="The information needed in order to make system decision" type="aggregate" id="rDh7Exwzt8yUvpTUyitgha">
 75 |       <mxCell style="aggregate" vertex="1" parent="4GJrVwEMmvoVkMnxbRhhnS" tempVisible="1">
 76 |         <mxGeometry x="383.5" y="173" width="189" height="118" as="geometry"/>
 77 |       </mxCell>
 78 |     </aggregate>
 79 |     <mxCell id="kJhpEMJtwPMa6NZuwHyWCj" style="html=1;dashed=1;" edge="1" parent="4GJrVwEMmvoVkMnxbRhhnS" source="jE4AvQ7dmH12zqigFDik3r" target="wde8brUEpPm6XgQSvNnRCk" tempVisible="1">
 80 |       <mxGeometry relative="1" as="geometry">
 81 |         <Array as="points">
 82 |           <mxPoint x="141" y="115"/>
 83 |         </Array>
 84 |       </mxGeometry>
 85 |     </mxCell>
 86 |     <policy label="Process&lt;div&gt;&quot;Whenever&quot;&lt;/div&gt;" type="policy" id="jE4AvQ7dmH12zqigFDik3r">
 87 |       <mxCell style="policy" vertex="1" parent="4GJrVwEMmvoVkMnxbRhhnS" tempVisible="1">
 88 |         <mxGeometry x="695" y="73" width="190" height="119" as="geometry"/>
 89 |       </mxCell>
 90 |     </policy>
 91 |     <feature label="Read Model" type="feature" id="fJYLfWP86KrpXfnryjt4vs">
 92 |       <mxCell style="feature" vertex="1" alternateStyle="feature;verticalAlign=middle;fontSize=56;" originalStyle="feature" alternateStyleEnabled="0" parent="7muMXvu1Wq24V4LsqQHxPN">
 93 |         <mxGeometry x="253" y="736" width="962" height="448" as="geometry">
 94 |           <mxRectangle x="190" y="688" width="962" height="448" as="alternateBounds"/>
 95 |         </mxGeometry>
 96 |       </mxCell>
 97 |     </feature>
 98 |     <document label="Information" type="document" id="rdknN1ZzoGkyDXaYzZ5cG1">
 99 |       <mxCell style="document" vertex="1" parent="fJYLfWP86KrpXfnryjt4vs" tempVisible="1">
100 |         <mxGeometry x="401" y="208" width="179" height="112" as="geometry"/>
101 |       </mxCell>
102 |     </document>
103 |     <mxCell id="LVmEBUbPLRMb737z7H2MG" style="html=1;dashed=1;" edge="1" parent="7muMXvu1Wq24V4LsqQHxPN" source="9SPFgQjsqpsqrunv1ptqGu" target="rdknN1ZzoGkyDXaYzZ5cG1">
104 |       <mxGeometry relative="1" as="geometry">
105 |         <Array as="points">
106 |           <mxPoint x="1049" y="1000"/>
107 |         </Array>
108 |       </mxGeometry>
109 |     </mxCell>
110 |     <ui label="&amp;nbsp;&amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 576 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 400H48V80h480v352zM208 256c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm-89.6 128h179.2c12.4 0 22.4-8.6 22.4-19.2v-19.2c0-31.8-30.1-57.6-67.2-57.6-10.8 0-18.7 8-44.8 8-26.9 0-33.4-8-44.8-8-37.1 0-67.2 25.8-67.2 57.6v19.2c0 10.6 10 19.2 22.4 19.2zM360 320h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm0-64h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm0-64h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 448 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M288 44v40c0 8.837-7.163 16-16 16H16c-8.837 0-16-7.163-16-16V44c0-8.837 7.163-16 16-16h256c8.837 0 16 7.163 16 16zM0 172v40c0 8.837 7.163 16 16 16h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16zm16 312h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm256-200H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16h256c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;&lt;div&gt;&amp;nbsp;&amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 544 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M527.79 288H290.5l158.03 158.03c6.04 6.04 15.98 6.53 22.19.68 38.7-36.46 65.32-85.61 73.13-140.86 1.34-9.46-6.51-17.85-16.06-17.85zm-15.83-64.8C503.72 103.74 408.26 8.28 288.8.04 279.68-.59 272 7.1 272 16.24V240h223.77c9.14 0 16.82-7.68 16.19-16.8zM224 288V50.71c0-9.55-8.39-17.4-17.84-16.06C86.99 51.49-4.1 155.6.14 280.37 4.5 408.51 114.83 513.59 243.03 511.98c50.4-.63 96.97-16.87 135.26-44.03 7.9-5.6 8.42-17.23 1.57-24.08L224 288z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp; &amp;nbsp;&amp;nbsp;&lt;i&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot; style=&quot;width: 30px; height: 30px;&quot;&gt;&lt;path fill=&quot;currentcolor&quot; d=&quot;M496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM464 96H345.94c-21.38 0-32.09 25.85-16.97 40.97l32.4 32.4L288 242.75l-73.37-73.37c-12.5-12.5-32.76-12.5-45.25 0l-68.69 68.69c-6.25 6.25-6.25 16.38 0 22.63l22.62 22.62c6.25 6.25 16.38 6.25 22.63 0L192 237.25l73.37 73.37c12.5 12.5 32.76 12.5 45.25 0l96-96 32.4 32.4c15.12 15.12 40.97 4.41 40.97-16.97V112c.01-8.84-7.15-16-15.99-16z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;&lt;br&gt;&lt;/div&gt;" type="ui" id="hGy4KgszrJLRDoqDPZkBzS">
111 |       <mxCell style="ui" vertex="1" parent="7muMXvu1Wq24V4LsqQHxPN">
112 |         <mxGeometry x="32" y="858" width="189" height="118" as="geometry"/>
113 |       </mxCell>
114 |     </ui>
115 |     <mxCell id="vGYG2RRp2VVCnPiViP4QdL" style="html=1;dashed=1;" edge="1" parent="7muMXvu1Wq24V4LsqQHxPN" source="rdknN1ZzoGkyDXaYzZ5cG1" target="hGy4KgszrJLRDoqDPZkBzS">
116 |       <mxGeometry relative="1" as="geometry"/>
117 |     </mxCell>
118 |     <mxCell id="rfpn43s52bWy1ZebTsCVqg" style="html=1;dashed=1;" edge="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78" source="hGy4KgszrJLRDoqDPZkBzS" target="5h3JkGQGGmqSp5NivxpJZh">
119 |       <mxGeometry relative="1" as="geometry"/>
120 |     </mxCell>
121 |     <mxCell id="auJr9NSwbdrQEHeyu3imZi" style="html=1;dashed=1;" edge="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78" source="sB2VnXJWUTcQ2H27hL2UDb" target="wde8brUEpPm6XgQSvNnRCk">
122 |       <mxGeometry relative="1" as="geometry">
123 |         <Array as="points">
124 |           <mxPoint x="1229" y="-481"/>
125 |           <mxPoint x="-67" y="-481"/>
126 |         </Array>
127 |       </mxGeometry>
128 |     </mxCell>
129 |     <mxCell id="9EVFJwuybShQRi6kKFRugX" style="html=1;dashed=1;" edge="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78" source="sB2VnXJWUTcQ2H27hL2UDb" target="9SPFgQjsqpsqrunv1ptqGu">
130 |       <mxGeometry relative="1" as="geometry">
131 |         <Array as="points">
132 |           <mxPoint x="1230" y="-67"/>
133 |         </Array>
134 |       </mxGeometry>
135 |     </mxCell>
136 |     <externalSystem label="External System" type="externalSystem" id="sB2VnXJWUTcQ2H27hL2UDb">
137 |       <mxCell style="externalSystem" vertex="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
138 |         <mxGeometry x="1136" y="-337" width="189" height="118" as="geometry"/>
139 |       </mxCell>
140 |     </externalSystem>
141 |     <mxCell id="g4cf5VnhD95uGdcT4zaFhA" value="&lt;font style=&quot;font-size: 72px;&quot;&gt;&lt;b&gt;The Picture that explains &lt;/b&gt;&lt;i style=&quot;&quot;&gt;&lt;font color=&quot;#4d4d4d&quot; style=&quot;&quot;&gt;almost&lt;/font&gt;&lt;/i&gt;&lt;b&gt; everything&lt;/b&gt;&lt;/font&gt;" style="freeText;fillColor=#FFDED9;" vertex="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
142 |       <mxGeometry x="-464" y="-816" width="1520" height="144" as="geometry"/>
143 |     </mxCell>
144 |     <mxCell id="2ZgHGEFnRpwEM7xnW8ySvt" value="&lt;div style=&quot;text-align: left;&quot;&gt;&lt;b&gt;&lt;font style=&quot;font-size: 18px;&quot;&gt;Credits&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;b&gt;&lt;font style=&quot;font-size: 18px;&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;b&gt;&lt;font style=&quot;font-size: 18px;&quot;&gt;Alberto Brandolini&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;b&gt;&lt;font style=&quot;font-size: 18px;&quot;&gt;&lt;a href=&quot;https://www.eventstorming.com/&quot;&gt;https://www.eventstorming.com/&lt;/a&gt;&lt;br&gt;&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;" style="freeText;fillColor=#FFF2CC;" vertex="1" parent="7fe80d19-d317-4e9d-8296-96c598786d78">
145 |       <mxGeometry x="-928" y="544" width="352" height="144" as="geometry"/>
146 |     </mxCell>
147 |   </root>
148 | </mxGraphModel>
149 | 


--------------------------------------------------------------------------------
/assets/connect_with_arrow.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/event-engine/inspectio/81a809de34dd8748f8ed6bcd5128e9c2e41ac8a0/assets/connect_with_arrow.gif


--------------------------------------------------------------------------------
/assets/event_modeling.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/event-engine/inspectio/81a809de34dd8748f8ed6bcd5128e9c2e41ac8a0/assets/event_modeling.gif


--------------------------------------------------------------------------------
/assets/hr_and_autosize.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/event-engine/inspectio/81a809de34dd8748f8ed6bcd5128e9c2e41ac8a0/assets/hr_and_autosize.gif


--------------------------------------------------------------------------------
/assets/realtime_collaboration.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/event-engine/inspectio/81a809de34dd8748f8ed6bcd5128e9c2e41ac8a0/assets/realtime_collaboration.gif


--------------------------------------------------------------------------------