marko/packages/runtime-class/docs/component-diagram.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 768 262" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
    <g transform="matrix(0.782468,0,0,0.782468,10.8862,9.86586)">
        <path d="M152,81L336.779,81L336.779,67L368,95L336.779,123L336.779,109L152,109L152,81Z" style="fill:rgb(129,211,26);fill-rule:nonzero;"/>
    </g>
    <g transform="matrix(0.782468,0,0,0.782468,10.8862,9.86586)">
        <path d="M622,81.25L755.221,81.25L755.221,67L787,95.5L755.221,124L755.221,109.75L622,109.75L622,81.25Z" style="fill:rgb(0,176,240);fill-rule:nonzero;"/>
    </g>
    <g transform="matrix(0.782468,0,0,0.782468,10.8862,9.86586)">
        <path d="M588.294,148L629.609,179L607.814,179C622.247,233.748 672.666,272 730.397,272L699.397,272C641.667,272 591.247,233.748 576.815,179L555.02,179L588.294,148Z" style="fill:rgb(255,192,0);fill-rule:nonzero;"/>
    </g>
    <g transform="matrix(0.782468,0,0,0.782468,10.8862,9.86586)">
        <path d="M714.897,271.067C778.343,263.401 826,210.612 826,148L857,148C857,216.483 800.318,272 730.397,272C725.216,272 720.04,271.688 714.897,271.067L714.897,271.067Z" style="fill:rgb(205,154,0);fill-rule:nonzero;"/>
    </g>
    <g transform="matrix(0.782468,0,0,0.782468,10.8862,9.86586)">
        <path d="M427,116L427,197.232C427,232.509 398.402,261.107 363.125,261.107L144.5,261.107L144.5,276L108,247.653L144.5,219.305L144.5,234.198L363.125,234.198C383.541,234.198 400.091,217.648 400.091,197.232L400.091,116L427,116Z" style="fill:rgb(255,192,0);fill-rule:nonzero;"/>
    </g>
    <g transform="matrix(0.782468,0,0,0.782468,10.8862,9.86586)">
        <path d="M457,10.5C457,5.253 461.253,1 466.5,1L536.5,1C541.747,1 546,5.253 546,10.5L546,48.5C546,53.747 541.747,58 536.5,58L466.5,58C461.253,58 457,53.747 457,48.5L457,10.5Z" style="fill:rgb(154,37,39);fill-rule:nonzero;"/>
    </g>
    <g transform="matrix(0.782468,0,0,0.782468,10.8862,9.86586)">
        <path d="M371,10C371,4.477 375.477,0 381,0L442,0C447.523,0 452,4.477 452,10L452,50C452,55.523 447.523,60 442,60L381,60C375.477,60 371,55.523 371,50L371,10Z" style="fill:rgb(166,166,166);fill-rule:nonzero;"/>
    </g>
    <g transform="matrix(0.782468,0,0,0.782468,10.8862,9.86586)">
        <path d="M551,9.5C551,4.253 555.253,0 560.5,0L612.5,0C617.747,0 622,4.253 622,9.5L622,47.5C622,52.747 617.747,57 612.5,57L560.5,57C555.253,57 551,52.747 551,47.5L551,9.5Z" style="fill:rgb(154,37,39);fill-rule:nonzero;"/>
    </g>
    <g transform="matrix(0.782468,0,0,0.782468,10.8862,9.86586)">
        <rect x="371" y="42" width="251" height="106" style="fill:rgb(223,46,47);fill-rule:nonzero;"/>
    </g>
    <g transform="matrix(0.782468,0,0,0.782468,10.8862,9.86586)">
        <text x="59.321px" y="107.159px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(167,234,82);">I</text>
        <text x="69.523px" y="107.159px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(167,234,82);">n</text>
        <text x="89.695px" y="107.159px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(167,234,82);">p</text>
        <text x="109.516px" y="107.159px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(167,234,82);">u<tspan x="129.738px " y="107.159px ">t</tspan></text>
    </g>
    <g transform="matrix(0.782468,0,0,0.782468,10.8862,9.86586)">
        <text x="794.64px" y="87.768px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(94,204,243);">D</text>
        <text x="821.038px" y="87.768px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(94,204,243);">O</text>
        <text x="849.29px" y="87.768px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(94,204,243);">M</text>
        <text x="878.828px" y="87.768px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(94,204,243);">/</text>
    </g>
    <g transform="matrix(0.782468,0,0,0.782468,10.8862,9.86586)">
        <text x="794.64px" y="130.768px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(94,204,243);">H</text>
        <text x="821.488px" y="130.768px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(94,204,243);">T</text>
        <text x="842.978px" y="130.768px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(94,204,243);">M</text>
        <text x="872.567px" y="130.768px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(94,204,243);">L</text>
    </g>
    <g transform="matrix(0.782468,0,0,0.782468,116.639,45.2145)">
        <text x="21.538px" y="256.769px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(255,192,0);">C</text>
        <text x="47.086px" y="256.769px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(255,192,0);">u</text>
        <text x="67.307px" y="256.769px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(255,192,0);">s</text>
        <text x="85.757px" y="256.769px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(255,192,0);">t</text>
        <text x="96.309px" y="256.769px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(255,192,0);">o</text>
        <text x="116.781px" y="256.769px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(255,192,0);">m</text>
        <text x="156.321px" y="256.769px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(255,192,0);">E</text>
        <text x="180.333px" y="256.769px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(255,192,0);">v</text>
        <text x="198.083px" y="256.769px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(255,192,0);">e</text>
        <text x="218.104px" y="256.769px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(255,192,0);">n</text>
        <text x="238.226px" y="256.769px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(255,192,0);">t</text>
        <text x="248.428px" y="256.769px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(255,192,0);">s</text>
    </g>
    <g transform="matrix(0.782468,0,0,0.782468,10.8862,9.86586)">
        <text x="604.892px" y="309.269px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(255,192,0);">D</text>
        <text x="631.291px" y="309.269px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(255,192,0);">O</text>
        <text x="659.542px" y="309.269px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(255,192,0);">M</text>
        <text x="699.178px" y="309.269px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(255,192,0);">E</text>
        <text x="723.19px" y="309.269px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(255,192,0);">v</text>
        <text x="740.94px" y="309.269px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(255,192,0);">en</text>
        <text x="780.983px" y="309.269px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(255,192,0);">t</text>
        <text x="791.335px" y="309.269px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;fill:rgb(255,192,0);">s</text>
    </g>
    <g transform="matrix(0.782468,0,0,0.782468,10.8862,9.86586)">
        <text x="396.157px" y="25.805px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;fill:white;">A</text>
        <text x="409.496px" y="25.805px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;fill:white;">P</text>
        <text x="423.186px" y="25.805px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;fill:white;">I</text>
    </g>
    <g transform="matrix(0.782468,0,0,0.782468,75.1354,10.0187)">
        <text x="396.157px" y="25.805px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;fill:white;">State</text>
    </g>
    <g transform="matrix(0.782468,0,0,0.782468,138.925,9.41815)">
        <text x="396.157px" y="25.805px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;fill:white;">Styles</text>
    </g>
    <g transform="matrix(0.782468,0,0,0.782468,75.5188,-35.8631)">
        <text x="311.649px" y="161.723px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:32px;fill:white;">UI Component</text>
    </g>
</svg>