vitepress-plugin-drawio

A VitePress plugin for rendering drawio diagrams.

Installation

npm install @dhlx/vitepress-plugin-drawio

Usage

set the drawioPlugin in the vitepress.config.ts file.

// .vitepress/config.ts
import { defineConfig } from 'vitepress'
import withDrawio from '@dhlx/vitepress-plugin-drawio'
export default withDrawio(defineConfig({
  
}), {
    // default page
    // set default width， default： 100%
    width: "100%",
    // set default height，default： 600px
    height: "600px",
    // start page 0
    page: 0,
    // set page title
    // dark mode，default： auto, options： light, dark, auto
    "darkMode": "auto",
    
    // enable toolbar resize，default： false
    resize: true,

    // enable toolbar change pages，default： false
    pages: true,
    // enable toolbar zoom，default： false
    zoom: true,

    // enable toolbar layers，default： false
    layers: true,

    // enable toolbar lightbox，default： false
    lightbox: true,
    
    // set highlight color，default： #0000FF
    highlight: "#0000ff",
    
    // set transparent background，default： false
    transparent: true,
})

Example

![](./img/hmr.drawio){edit=_blank transparent=true nav=true  }

{} is the attribute of the drawio diagram. You can set the attribute in the vitepress.config.ts file.

if you set the transparent=true，the background will be transparent.

other attribute will be override the vitepress.config.ts file.

drawio export embed html

<div class="mxgraph" style="max-width:100%;border:1px solid transparent;" data-mxgraph="{&quot;highlight&quot;:&quot;#0000ff&quot;,&quot;nav&quot;:true,&quot;resize&quot;:true,&quot;toolbar&quot;:&quot;zoom layers tags lightbox&quot;,&quot;edit&quot;:&quot;_blank&quot;,&quot;xml&quot;:&quot;&lt;mxfile host=\&quot;drawio-plugin\&quot; modified=\&quot;2025-06-27T13:24:57.413Z\&quot; agent=\&quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36\&quot; etag=\&quot;7LfbhlVYnnBihQg1IvBB\&quot; version=\&quot;22.1.22\&quot; type=\&quot;embed\&quot;&gt;\n  &lt;diagram id=\&quot;qkP3y_bxUUfVqNj_0rsu\&quot; name=\&quot;Page-1\&quot;&gt;\n    &lt;mxGraphModel dx=\&quot;1021\&quot; dy=\&quot;271\&quot; grid=\&quot;1\&quot; gridSize=\&quot;10\&quot; guides=\&quot;1\&quot; tooltips=\&quot;1\&quot; connect=\&quot;1\&quot; arrows=\&quot;1\&quot; fold=\&quot;1\&quot; page=\&quot;1\&quot; pageScale=\&quot;1\&quot; pageWidth=\&quot;850\&quot; pageHeight=\&quot;1100\&quot; math=\&quot;0\&quot; shadow=\&quot;0\&quot;&gt;\n      &lt;root&gt;\n        &lt;mxCell id=\&quot;0\&quot; /&gt;\n        &lt;mxCell id=\&quot;1\&quot; parent=\&quot;0\&quot; /&gt;\n        &lt;mxCell id=\&quot;R3OlMqQ6P8qwzzm3plWy-15\&quot; value=\&quot;\&quot; style=\&quot;swimlane;startSize=0;\&quot; parent=\&quot;1\&quot; vertex=\&quot;1\&quot;&gt;\n          &lt;mxGeometry x=\&quot;-755\&quot; y=\&quot;560\&quot; width=\&quot;705\&quot; height=\&quot;295\&quot; as=\&quot;geometry\&quot;&gt;\n            &lt;mxRectangle x=\&quot;-750\&quot; y=\&quot;530\&quot; width=\&quot;660\&quot; height=\&quot;240\&quot; as=\&quot;alternateBounds\&quot; /&gt;\n          &lt;/mxGeometry&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;8\&quot; style=\&quot;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;startArrow=classic;startFill=1;\&quot; parent=\&quot;R3OlMqQ6P8qwzzm3plWy-15\&quot; source=\&quot;R3OlMqQ6P8qwzzm3plWy-11\&quot; target=\&quot;R3OlMqQ6P8qwzzm3plWy-12\&quot; edge=\&quot;1\&quot;&gt;\n          &lt;mxGeometry relative=\&quot;1\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;9\&quot; value=\&quot;&amp;lt;font style=&amp;quot;font-size: 12px;&amp;quot;&amp;gt;Watch/compile&amp;lt;/font&amp;gt;\&quot; style=\&quot;edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];\&quot; parent=\&quot;8\&quot; vertex=\&quot;1\&quot; connectable=\&quot;0\&quot;&gt;\n          &lt;mxGeometry x=\&quot;-0.2242\&quot; y=\&quot;-3\&quot; relative=\&quot;1\&quot; as=\&quot;geometry\&quot;&gt;\n            &lt;mxPoint as=\&quot;offset\&quot; /&gt;\n          &lt;/mxGeometry&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;10\&quot; value=\&quot;\&quot; style=\&quot;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.353;entryY=0.958;entryDx=0;entryDy=0;entryPerimeter=0;\&quot; parent=\&quot;R3OlMqQ6P8qwzzm3plWy-15\&quot; source=\&quot;R3OlMqQ6P8qwzzm3plWy-11\&quot; target=\&quot;R3OlMqQ6P8qwzzm3plWy-10\&quot; edge=\&quot;1\&quot;&gt;\n          &lt;mxGeometry relative=\&quot;1\&quot; as=\&quot;geometry\&quot;&gt;\n            &lt;mxPoint x=\&quot;200\&quot; y=\&quot;95\&quot; as=\&quot;targetPoint\&quot; /&gt;\n          &lt;/mxGeometry&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;R3OlMqQ6P8qwzzm3plWy-11\&quot; value=\&quot;webpack\&quot; style=\&quot;rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=none;\&quot; parent=\&quot;R3OlMqQ6P8qwzzm3plWy-15\&quot; vertex=\&quot;1\&quot;&gt;\n          &lt;mxGeometry x=\&quot;82.5\&quot; y=\&quot;150\&quot; width=\&quot;235\&quot; height=\&quot;60\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;11\&quot; style=\&quot;edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;\&quot; parent=\&quot;R3OlMqQ6P8qwzzm3plWy-15\&quot; source=\&quot;R3OlMqQ6P8qwzzm3plWy-10\&quot; target=\&quot;R3OlMqQ6P8qwzzm3plWy-12\&quot; edge=\&quot;1\&quot;&gt;\n          &lt;mxGeometry relative=\&quot;1\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;12\&quot; value=\&quot;watch\&quot; style=\&quot;edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];\&quot; parent=\&quot;11\&quot; vertex=\&quot;1\&quot; connectable=\&quot;0\&quot;&gt;\n          &lt;mxGeometry x=\&quot;0.1055\&quot; y=\&quot;-4\&quot; relative=\&quot;1\&quot; as=\&quot;geometry\&quot;&gt;\n            &lt;mxPoint as=\&quot;offset\&quot; /&gt;\n          &lt;/mxGeometry&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;R3OlMqQ6P8qwzzm3plWy-10\&quot; value=\&quot;webpack-dev-server&amp;lt;br&amp;gt;webpack-dev-middleware\&quot; style=\&quot;rounded=1;whiteSpace=wrap;html=1;fillColor=#58E0EF;fontColor=#000000;strokeColor=none;\&quot; parent=\&quot;R3OlMqQ6P8qwzzm3plWy-15\&quot; vertex=\&quot;1\&quot;&gt;\n          &lt;mxGeometry x=\&quot;20\&quot; y=\&quot;30\&quot; width=\&quot;510\&quot; height=\&quot;60\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;R3OlMqQ6P8qwzzm3plWy-12\&quot; value=\&quot;File/module changed\&quot; style=\&quot;rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=none;\&quot; parent=\&quot;R3OlMqQ6P8qwzzm3plWy-15\&quot; vertex=\&quot;1\&quot;&gt;\n          &lt;mxGeometry x=\&quot;487\&quot; y=\&quot;150\&quot; width=\&quot;180\&quot; height=\&quot;60\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;18\&quot; value=\&quot;1\&quot; style=\&quot;ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#60a917;fontColor=#FFFFFF;strokeColor=#2D7600;fontStyle=1;fontSize=16;\&quot; parent=\&quot;R3OlMqQ6P8qwzzm3plWy-15\&quot; vertex=\&quot;1\&quot;&gt;\n          &lt;mxGeometry x=\&quot;365\&quot; y=\&quot;130\&quot; width=\&quot;30\&quot; height=\&quot;30\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;21\&quot; value=\&quot;2\&quot; style=\&quot;ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#60a917;fontColor=#FFFFFF;strokeColor=#2D7600;fontStyle=1;fontSize=16;\&quot; parent=\&quot;R3OlMqQ6P8qwzzm3plWy-15\&quot; vertex=\&quot;1\&quot;&gt;\n          &lt;mxGeometry x=\&quot;155\&quot; y=\&quot;110\&quot; width=\&quot;30\&quot; height=\&quot;30\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;22\&quot; value=\&quot;3\&quot; style=\&quot;ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#60a917;fontColor=#FFFFFF;strokeColor=#2D7600;fontStyle=1;fontSize=16;\&quot; parent=\&quot;R3OlMqQ6P8qwzzm3plWy-15\&quot; vertex=\&quot;1\&quot;&gt;\n          &lt;mxGeometry x=\&quot;585\&quot; y=\&quot;80\&quot; width=\&quot;30\&quot; height=\&quot;30\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;R3OlMqQ6P8qwzzm3plWy-13\&quot; value=\&quot;\&quot; style=\&quot;swimlane;startSize=0;fillColor=none;rounded=0;shadow=0;glass=1;swimlaneLine=0;\&quot; parent=\&quot;1\&quot; vertex=\&quot;1\&quot;&gt;\n          &lt;mxGeometry x=\&quot;-760\&quot; y=\&quot;100\&quot; width=\&quot;710\&quot; height=\&quot;330\&quot; as=\&quot;geometry\&quot;&gt;\n            &lt;mxRectangle x=\&quot;-760\&quot; y=\&quot;100\&quot; width=\&quot;670\&quot; height=\&quot;290\&quot; as=\&quot;alternateBounds\&quot; /&gt;\n          &lt;/mxGeometry&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;25\&quot; style=\&quot;edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;\&quot; parent=\&quot;R3OlMqQ6P8qwzzm3plWy-13\&quot; source=\&quot;2\&quot; target=\&quot;6\&quot; edge=\&quot;1\&quot;&gt;\n          &lt;mxGeometry relative=\&quot;1\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;2\&quot; value=\&quot;webpack-dev-server/client\&quot; style=\&quot;rounded=1;whiteSpace=wrap;html=1;fillColor=#58E0EF;fontColor=#000000;strokeColor=none;\&quot; parent=\&quot;R3OlMqQ6P8qwzzm3plWy-13\&quot; vertex=\&quot;1\&quot;&gt;\n          &lt;mxGeometry x=\&quot;10\&quot; y=\&quot;140\&quot; width=\&quot;220\&quot; height=\&quot;60\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;27\&quot; style=\&quot;edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;\&quot; parent=\&quot;R3OlMqQ6P8qwzzm3plWy-13\&quot; source=\&quot;6\&quot; target=\&quot;R3OlMqQ6P8qwzzm3plWy-6\&quot; edge=\&quot;1\&quot;&gt;\n          &lt;mxGeometry relative=\&quot;1\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;39\&quot; style=\&quot;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;\&quot; parent=\&quot;R3OlMqQ6P8qwzzm3plWy-13\&quot; source=\&quot;6\&quot; target=\&quot;R3OlMqQ6P8qwzzm3plWy-8\&quot; edge=\&quot;1\&quot;&gt;\n          &lt;mxGeometry relative=\&quot;1\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;6\&quot; value=\&quot;webpack/hot/&amp;lt;br&amp;gt;dev-server\&quot; style=\&quot;rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=none;\&quot; parent=\&quot;R3OlMqQ6P8qwzzm3plWy-13\&quot; vertex=\&quot;1\&quot;&gt;\n          &lt;mxGeometry x=\&quot;280\&quot; y=\&quot;140\&quot; width=\&quot;110\&quot; height=\&quot;60\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;31\&quot; style=\&quot;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.71;exitY=0;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.452;entryY=0.967;entryDx=0;entryDy=0;entryPerimeter=0;\&quot; parent=\&quot;R3OlMqQ6P8qwzzm3plWy-13\&quot; source=\&quot;R3OlMqQ6P8qwzzm3plWy-7\&quot; target=\&quot;R3OlMqQ6P8qwzzm3plWy-6\&quot; edge=\&quot;1\&quot;&gt;\n          &lt;mxGeometry relative=\&quot;1\&quot; as=\&quot;geometry\&quot;&gt;\n            &lt;mxPoint x=\&quot;462\&quot; y=\&quot;236.51999999999998\&quot; as=\&quot;sourcePoint\&quot; /&gt;\n            &lt;mxPoint x=\&quot;460\&quot; y=\&quot;110\&quot; as=\&quot;targetPoint\&quot; /&gt;\n          &lt;/mxGeometry&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;R3OlMqQ6P8qwzzm3plWy-7\&quot; value=\&quot;JsonpMain Template Runtime\&quot; style=\&quot;rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=none;\&quot; parent=\&quot;R3OlMqQ6P8qwzzm3plWy-13\&quot; vertex=\&quot;1\&quot;&gt;\n          &lt;mxGeometry x=\&quot;320\&quot; y=\&quot;240\&quot; width=\&quot;200\&quot; height=\&quot;60\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;29\&quot; style=\&quot;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;\&quot; parent=\&quot;R3OlMqQ6P8qwzzm3plWy-13\&quot; source=\&quot;R3OlMqQ6P8qwzzm3plWy-6\&quot; target=\&quot;R3OlMqQ6P8qwzzm3plWy-7\&quot; edge=\&quot;1\&quot;&gt;\n          &lt;mxGeometry relative=\&quot;1\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;37\&quot; style=\&quot;edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;\&quot; parent=\&quot;R3OlMqQ6P8qwzzm3plWy-13\&quot; source=\&quot;R3OlMqQ6P8qwzzm3plWy-6\&quot; target=\&quot;R3OlMqQ6P8qwzzm3plWy-8\&quot; edge=\&quot;1\&quot;&gt;\n          &lt;mxGeometry relative=\&quot;1\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;R3OlMqQ6P8qwzzm3plWy-6\&quot; value=\&quot;HotModuleReplacement&amp;lt;br&amp;gt;Runtime\&quot; style=\&quot;rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=none;\&quot; parent=\&quot;R3OlMqQ6P8qwzzm3plWy-13\&quot; vertex=\&quot;1\&quot;&gt;\n          &lt;mxGeometry x=\&quot;367\&quot; y=\&quot;42\&quot; width=\&quot;210\&quot; height=\&quot;60\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;R3OlMqQ6P8qwzzm3plWy-8\&quot; value=\&quot;App/updated\&quot; style=\&quot;rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=none;\&quot; parent=\&quot;R3OlMqQ6P8qwzzm3plWy-13\&quot; vertex=\&quot;1\&quot;&gt;\n          &lt;mxGeometry x=\&quot;580\&quot; y=\&quot;140\&quot; width=\&quot;120\&quot; height=\&quot;60\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;15\&quot; value=\&quot;4\&quot; style=\&quot;ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#60a917;fontColor=#FFFFFF;strokeColor=#2D7600;fontStyle=1;fontSize=16;\&quot; parent=\&quot;R3OlMqQ6P8qwzzm3plWy-13\&quot; vertex=\&quot;1\&quot;&gt;\n          &lt;mxGeometry x=\&quot;80\&quot; y=\&quot;270\&quot; width=\&quot;30\&quot; height=\&quot;30\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;26\&quot; value=\&quot;5\&quot; style=\&quot;ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#60a917;fontColor=#FFFFFF;strokeColor=#2D7600;fontStyle=1;fontSize=16;\&quot; parent=\&quot;R3OlMqQ6P8qwzzm3plWy-13\&quot; vertex=\&quot;1\&quot;&gt;\n          &lt;mxGeometry x=\&quot;240\&quot; y=\&quot;125\&quot; width=\&quot;30\&quot; height=\&quot;30\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;28\&quot; value=\&quot;6\&quot; style=\&quot;ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#60a917;fontColor=#FFFFFF;strokeColor=#2D7600;fontStyle=1;fontSize=16;\&quot; parent=\&quot;R3OlMqQ6P8qwzzm3plWy-13\&quot; vertex=\&quot;1\&quot;&gt;\n          &lt;mxGeometry x=\&quot;300\&quot; y=\&quot;80\&quot; width=\&quot;30\&quot; height=\&quot;30\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;30\&quot; value=\&quot;7\&quot; style=\&quot;ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#60a917;fontColor=#FFFFFF;strokeColor=#2D7600;fontStyle=1;fontSize=16;\&quot; parent=\&quot;R3OlMqQ6P8qwzzm3plWy-13\&quot; vertex=\&quot;1\&quot;&gt;\n          &lt;mxGeometry x=\&quot;426\&quot; y=\&quot;120\&quot; width=\&quot;30\&quot; height=\&quot;30\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;38\&quot; value=\&quot;10\&quot; style=\&quot;ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#60a917;fontColor=#FFFFFF;strokeColor=#2D7600;fontStyle=1;fontSize=16;\&quot; parent=\&quot;R3OlMqQ6P8qwzzm3plWy-13\&quot; vertex=\&quot;1\&quot;&gt;\n          &lt;mxGeometry x=\&quot;600\&quot; y=\&quot;60\&quot; width=\&quot;30\&quot; height=\&quot;30\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;41\&quot; value=\&quot;11\&quot; style=\&quot;ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#60a917;fontColor=#FFFFFF;strokeColor=#2D7600;fontStyle=1;fontSize=16;\&quot; parent=\&quot;R3OlMqQ6P8qwzzm3plWy-13\&quot; vertex=\&quot;1\&quot;&gt;\n          &lt;mxGeometry x=\&quot;500\&quot; y=\&quot;135\&quot; width=\&quot;30\&quot; height=\&quot;30\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;13\&quot; style=\&quot;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.25;entryY=1;entryDx=0;entryDy=0;\&quot; parent=\&quot;1\&quot; target=\&quot;2\&quot; edge=\&quot;1\&quot;&gt;\n          &lt;mxGeometry relative=\&quot;1\&quot; as=\&quot;geometry\&quot;&gt;\n            &lt;mxPoint x=\&quot;-696\&quot; y=\&quot;590\&quot; as=\&quot;sourcePoint\&quot; /&gt;\n          &lt;/mxGeometry&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;14\&quot; style=\&quot;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;\&quot; parent=\&quot;1\&quot; source=\&quot;2\&quot; edge=\&quot;1\&quot;&gt;\n          &lt;mxGeometry relative=\&quot;1\&quot; as=\&quot;geometry\&quot;&gt;\n            &lt;mxPoint x=\&quot;-640\&quot; y=\&quot;590\&quot; as=\&quot;targetPoint\&quot; /&gt;\n          &lt;/mxGeometry&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;R3OlMqQ6P8qwzzm3plWy-9\&quot; value=\&quot;Socket\&quot; style=\&quot;rounded=1;whiteSpace=wrap;html=1;fillColor=#58E0EF;fontColor=#000000;strokeColor=none;\&quot; parent=\&quot;1\&quot; vertex=\&quot;1\&quot;&gt;\n          &lt;mxGeometry x=\&quot;-720\&quot; y=\&quot;480\&quot; width=\&quot;110\&quot; height=\&quot;50\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;33\&quot; style=\&quot;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.678;entryY=0.041;entryDx=0;entryDy=0;entryPerimeter=0;startArrow=classic;startFill=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;\&quot; parent=\&quot;1\&quot; source=\&quot;R3OlMqQ6P8qwzzm3plWy-7\&quot; target=\&quot;R3OlMqQ6P8qwzzm3plWy-10\&quot; edge=\&quot;1\&quot;&gt;\n          &lt;mxGeometry relative=\&quot;1\&quot; as=\&quot;geometry\&quot;&gt;\n            &lt;mxPoint x=\&quot;-390\&quot; y=\&quot;410\&quot; as=\&quot;sourcePoint\&quot; /&gt;\n          &lt;/mxGeometry&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;34\&quot; value=\&quot;8\&quot; style=\&quot;ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#60a917;fontColor=#FFFFFF;strokeColor=#2D7600;fontStyle=1;fontSize=16;\&quot; parent=\&quot;1\&quot; vertex=\&quot;1\&quot;&gt;\n          &lt;mxGeometry x=\&quot;-430\&quot; y=\&quot;500\&quot; width=\&quot;30\&quot; height=\&quot;30\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;35\&quot; style=\&quot;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.678;entryY=0.041;entryDx=0;entryDy=0;entryPerimeter=0;startArrow=classic;startFill=1;exitX=0.71;exitY=1.055;exitDx=0;exitDy=0;exitPerimeter=0;\&quot; parent=\&quot;1\&quot; source=\&quot;R3OlMqQ6P8qwzzm3plWy-7\&quot; edge=\&quot;1\&quot;&gt;\n          &lt;mxGeometry relative=\&quot;1\&quot; as=\&quot;geometry\&quot;&gt;\n            &lt;mxPoint x=\&quot;-297\&quot; y=\&quot;420\&quot; as=\&quot;sourcePoint\&quot; /&gt;\n            &lt;mxPoint x=\&quot;-297\&quot; y=\&quot;594\&quot; as=\&quot;targetPoint\&quot; /&gt;\n          &lt;/mxGeometry&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;36\&quot; value=\&quot;9\&quot; style=\&quot;ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#60a917;fontColor=#FFFFFF;strokeColor=#2D7600;fontStyle=1;fontSize=16;\&quot; parent=\&quot;1\&quot; vertex=\&quot;1\&quot;&gt;\n          &lt;mxGeometry x=\&quot;-332.5\&quot; y=\&quot;500\&quot; width=\&quot;30\&quot; height=\&quot;30\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;42\&quot; value=\&quot;jsonp\&quot; style=\&quot;text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;\&quot; parent=\&quot;1\&quot; vertex=\&quot;1\&quot;&gt;\n          &lt;mxGeometry x=\&quot;-290\&quot; y=\&quot;500\&quot; width=\&quot;50\&quot; height=\&quot;30\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n        &lt;mxCell id=\&quot;43\&quot; value=\&quot;manifest\&quot; style=\&quot;text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;\&quot; parent=\&quot;1\&quot; vertex=\&quot;1\&quot;&gt;\n          &lt;mxGeometry x=\&quot;-460\&quot; y=\&quot;460\&quot; width=\&quot;70\&quot; height=\&quot;30\&quot; as=\&quot;geometry\&quot; /&gt;\n        &lt;/mxCell&gt;\n      &lt;/root&gt;\n    &lt;/mxGraphModel&gt;\n  &lt;/diagram&gt;\n&lt;/mxfile&gt;\n&quot;}"></div>