docs/test_cases/t30010_package_mermaid.svg

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" aria-roledescription="flowchart-v2" role="graphics-document document" viewBox="0 0 463.625 196" style="max-width: 463.625px; background-color: white;" class="flowchart" width="463.625" id="my-svg">
  <style>#my-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#my-svg .error-icon{fill:#552222;}#my-svg .error-text{fill:#552222;stroke:#552222;}#my-svg .edge-thickness-normal{stroke-width:1px;}#my-svg .edge-thickness-thick{stroke-width:3.5px;}#my-svg .edge-pattern-solid{stroke-dasharray:0;}#my-svg .edge-thickness-invisible{stroke-width:0;fill:none;}#my-svg .edge-pattern-dashed{stroke-dasharray:3;}#my-svg .edge-pattern-dotted{stroke-dasharray:2;}#my-svg .marker{fill:#333333;stroke:#333333;}#my-svg .marker.cross{stroke:#333333;}#my-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#my-svg p{margin:0;}#my-svg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#my-svg .cluster-label text{fill:#333;}#my-svg .cluster-label span{color:#333;}#my-svg .cluster-label span p{background-color:transparent;}#my-svg .label text,#my-svg span{fill:#333;color:#333;}#my-svg .node rect,#my-svg .node circle,#my-svg .node ellipse,#my-svg .node polygon,#my-svg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#my-svg .rough-node .label text,#my-svg .node .label text,#my-svg .image-shape .label,#my-svg .icon-shape .label{text-anchor:middle;}#my-svg .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#my-svg .rough-node .label,#my-svg .node .label,#my-svg .image-shape .label,#my-svg .icon-shape .label{text-align:center;}#my-svg .node.clickable{cursor:pointer;}#my-svg .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#my-svg .arrowheadPath{fill:#333333;}#my-svg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#my-svg .flowchart-link{stroke:#333333;fill:none;}#my-svg .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#my-svg .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#my-svg .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#my-svg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#my-svg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#my-svg .cluster text{fill:#333;}#my-svg .cluster span{color:#333;}#my-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#my-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#my-svg rect.text{fill:none;stroke-width:0;}#my-svg .icon-shape,#my-svg .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#my-svg .icon-shape p,#my-svg .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#my-svg .icon-shape rect,#my-svg .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#my-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style>
  <g>
    <marker orient="auto" markerHeight="8" markerWidth="8" markerUnits="userSpaceOnUse" refY="5" refX="5" viewBox="0 0 10 10" class="marker flowchart-v2" id="my-svg_flowchart-v2-pointEnd">
      <path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"/>
    </marker>
    <marker orient="auto" markerHeight="8" markerWidth="8" markerUnits="userSpaceOnUse" refY="5" refX="4.5" viewBox="0 0 10 10" class="marker flowchart-v2" id="my-svg_flowchart-v2-pointStart">
      <path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"/>
    </marker>
    <marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11" viewBox="0 0 10 10" class="marker flowchart-v2" id="my-svg_flowchart-v2-circleEnd">
      <circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"/>
    </marker>
    <marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="-1" viewBox="0 0 10 10" class="marker flowchart-v2" id="my-svg_flowchart-v2-circleStart">
      <circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"/>
    </marker>
    <marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="12" viewBox="0 0 11 11" class="marker cross flowchart-v2" id="my-svg_flowchart-v2-crossEnd">
      <path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"/>
    </marker>
    <marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="-1" viewBox="0 0 11 11" class="marker cross flowchart-v2" id="my-svg_flowchart-v2-crossStart">
      <path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"/>
    </marker>
    <g class="root">
      <g class="clusters">
        <g data-look="classic" id="C_0007035209531004006049" class="cluster">
          <rect height="90" width="447.625" y="98" x="8" style=""/>
          <g transform="translate(203.8046875, 98)" class="cluster-label">
            <foreignObject height="24" width="56.015625">
              <div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;">
                <span class="nodeLabel">
                  <p>libraries</p>
                </span>
              </div>
            </foreignObject>
          </g>
        </g>
      </g>
      <g class="edgePaths">
        <path marker-end="url(#my-svg_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-dotted edge-thickness-normal edge-pattern-solid flowchart-link" id="L_C_0016010562093136641194_C_0007033698116283031691_0" d="M261.164,36.237L282.999,42.364C304.833,48.491,348.503,60.746,370.337,71.039C392.172,81.333,392.172,89.667,392.172,95.917C392.172,102.167,392.172,106.333,392.172,109.833C392.172,113.333,392.172,116.167,392.172,117.583L392.172,119"/>
        <path marker-end="url(#my-svg_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-dotted edge-thickness-normal edge-pattern-solid flowchart-link" id="L_C_0016010562093136641194_C_0012180849757009627397_1" d="M255.569,48L260.519,52.167C265.468,56.333,275.367,64.667,280.316,73C285.266,81.333,285.266,89.667,285.266,95.917C285.266,102.167,285.266,106.333,285.266,109.833C285.266,113.333,285.266,116.167,285.266,117.583L285.266,119"/>
        <path marker-end="url(#my-svg_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-dotted edge-thickness-normal edge-pattern-solid flowchart-link" id="L_C_0016010562093136641194_C_0018109676637220650603_2" d="M208.056,48L203.106,52.167C198.157,56.333,188.258,64.667,183.309,73C178.359,81.333,178.359,89.667,178.359,95.917C178.359,102.167,178.359,106.333,178.359,109.833C178.359,113.333,178.359,116.167,178.359,117.583L178.359,119"/>
        <path marker-end="url(#my-svg_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-dotted edge-thickness-normal edge-pattern-solid flowchart-link" id="L_C_0016010562093136641194_C_0008827624240187281752_3" d="M202.461,36.237L180.626,42.364C158.792,48.491,115.122,60.746,93.288,71.039C71.453,81.333,71.453,89.667,71.453,95.917C71.453,102.167,71.453,106.333,71.453,109.833C71.453,113.333,71.453,116.167,71.453,117.583L71.453,119"/>
      </g>
      <g class="edgeLabels">
        <g class="edgeLabel">
          <g transform="translate(0, 0)" class="label">
            <foreignObject height="0" width="0">
              <div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg">
                <span class="edgeLabel"/>
              </div>
            </foreignObject>
          </g>
        </g>
        <g class="edgeLabel">
          <g transform="translate(0, 0)" class="label">
            <foreignObject height="0" width="0">
              <div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg">
                <span class="edgeLabel"/>
              </div>
            </foreignObject>
          </g>
        </g>
        <g class="edgeLabel">
          <g transform="translate(0, 0)" class="label">
            <foreignObject height="0" width="0">
              <div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg">
                <span class="edgeLabel"/>
              </div>
            </foreignObject>
          </g>
        </g>
        <g class="edgeLabel">
          <g transform="translate(0, 0)" class="label">
            <foreignObject height="0" width="0">
              <div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg">
                <span class="edgeLabel"/>
              </div>
            </foreignObject>
          </g>
        </g>
      </g>
      <g class="nodes">
        <g transform="translate(231.8125, 28)" id="C_0016010562093136641194" class="node">
          <rect height="40" width="58.703125" y="-20" x="-29.3515625" style="" class="basic label-container"/>
          <g transform="translate(-13.3515625, -12)" style="" class="label">
            <rect/>
            <foreignObject height="24" width="26.703125">
              <div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;">
                <span class="nodeLabel">
                  <p>app</p>
                </span>
              </div>
            </foreignObject>
          </g>
        </g>
        <g transform="translate(71.453125, 143)" id="C_0008827624240187281752" class="node">
          <rect height="40" width="56.90625" y="-20" x="-28.453125" style="" class="basic label-container"/>
          <g transform="translate(-12.453125, -12)" style="" class="label">
            <rect/>
            <foreignObject height="24" width="24.90625">
              <div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;">
                <span class="nodeLabel">
                  <p>lib4</p>
                </span>
              </div>
            </foreignObject>
          </g>
        </g>
        <g transform="translate(178.359375, 143)" id="C_0018109676637220650603" class="node">
          <rect height="40" width="56.90625" y="-20" x="-28.453125" style="" class="basic label-container"/>
          <g transform="translate(-12.453125, -12)" style="" class="label">
            <rect/>
            <foreignObject height="24" width="24.90625">
              <div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;">
                <span class="nodeLabel">
                  <p>lib3</p>
                </span>
              </div>
            </foreignObject>
          </g>
        </g>
        <g transform="translate(285.265625, 143)" id="C_0012180849757009627397" class="node">
          <rect height="40" width="56.90625" y="-20" x="-28.453125" style="" class="basic label-container"/>
          <g transform="translate(-12.453125, -12)" style="" class="label">
            <rect/>
            <foreignObject height="24" width="24.90625">
              <div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;">
                <span class="nodeLabel">
                  <p>lib2</p>
                </span>
              </div>
            </foreignObject>
          </g>
        </g>
        <g transform="translate(392.171875, 143)" id="C_0007033698116283031691" class="node">
          <rect height="40" width="56.90625" y="-20" x="-28.453125" style="" class="basic label-container"/>
          <g transform="translate(-12.453125, -12)" style="" class="label">
            <rect/>
            <foreignObject height="24" width="24.90625">
              <div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;">
                <span class="nodeLabel">
                  <p>lib1</p>
                </span>
              </div>
            </foreignObject>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>