docs/test_cases/t30006_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 152.234375 250" style="max-width: 152.234px; background-color: white;" class="flowchart" width="152.234375" 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 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_N_0_C_0011999355388220637599_0" d="M75.895,62L75.895,66.167C75.895,70.333,75.895,78.667,75.895,84.917C75.895,91.167,75.895,95.333,75.895,98.833C75.895,102.333,75.895,105.167,75.895,106.583L75.895,108"/>
        <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_0011999355388220637599_C_0013272721377695553156_1" d="M55.202,152L50.891,156.167C46.58,160.333,37.958,168.667,33.647,174.917C29.336,181.167,29.336,185.333,29.336,188.833C29.336,192.333,29.336,195.167,29.336,196.583L29.336,198"/>
        <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_0011999355388220637599_C_0011044539711888922958_2" d="M96.587,152L100.898,156.167C105.209,160.333,113.831,168.667,118.142,174.917C122.453,181.167,122.453,185.333,122.453,188.833C122.453,192.333,122.453,195.167,122.453,196.583L122.453,198"/>
      </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>
      <g class="nodes">
        <g transform="translate(122.453125, 222)" id="C_0011044539711888922958" class="node">
          <rect height="40" width="43.5625" y="-20" x="-21.78125" style="" class="basic label-container"/>
          <g transform="translate(-5.78125, -12)" style="" class="label">
            <rect/>
            <foreignObject height="24" width="11.5625">
              <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>C</p>
                </span>
              </div>
            </foreignObject>
          </g>
        </g>
        <g transform="translate(75.89453125, 132)" id="C_0011999355388220637599" class="node">
          <rect height="40" width="42.671875" y="-20" x="-21.3359375" style="" class="basic label-container"/>
          <g transform="translate(-5.3359375, -12)" style="" class="label">
            <rect/>
            <foreignObject height="24" width="10.671875">
              <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>A</p>
                </span>
              </div>
            </foreignObject>
          </g>
        </g>
        <g transform="translate(29.3359375, 222)" id="C_0013272721377695553156" class="node">
          <rect height="40" width="42.671875" y="-20" x="-21.3359375" style="" class="basic label-container"/>
          <g transform="translate(-5.3359375, -12)" style="" class="label">
            <rect/>
            <foreignObject height="24" width="10.671875">
              <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>B</p>
                </span>
              </div>
            </foreignObject>
          </g>
        </g>
        <g transform="translate(75.89453125, 35)" id="flowchart-N_0-0" class="node default">
          <rect height="54" width="109.1875" y="-27" x="-54.59375" ry="5" rx="5" style="" class="basic label-container"/>
          <g transform="translate(-39.59375, -12)" style="" class="label">
            <rect/>
            <foreignObject height="24" width="79.1875">
              <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>Top A note.</p>
                </span>
              </div>
            </foreignObject>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>