<div>
  <svg width="100%" height="100%" viewBox="0 0 854 665" version="1.1">
    <title>Mocha Fixture Wizard</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <g transform="translate(2.000000, 3.000000)">
        <rect
          stroke="var(--sl-color-mocha-light)"
          stroke-width="5"
          fill="var(--sl-color-black)"
          fill-rule="nonzero"
          x="360"
          y="0"
          width="120"
          height="60"
          rx="9"></rect>
        <text
          fill="var(--sl-color-white)"
          fill-rule="nonzero"
          font-family="HelveticaNeue, Helvetica Neue"
          font-size="16"
          font-weight="normal"
        >
          <tspan x="388.972" y="27"> My tests </tspan>
          <tspan x="377.412" y="45"> need setup! </tspan>
        </text>
        <polygon
          fill="var(--sl-color-black)"
          stroke="#CCCCCC"
          stroke-width="4"
          transform="translate(420.000000, 200.000000) rotate(-90.000000) translate(-420.000000, -200.000000) "
          points="420 100 520 200 420 300 320 200"></polygon>
        <text
          fill="var(--sl-color-white)"
          fill-rule="nonzero"
          font-family="HelveticaNeue, Helvetica Neue"
          font-size="16"
          font-weight="normal"
        >
          <tspan x="360.28" y="196.5"> Setup MUST run </tspan>
          <tspan x="349.76" y="214.5"> once and only once </tspan>
        </text>
        <line
          x1="420"
          y1="60"
          x2="420"
          y2="89.76"
          stroke="var(--sl-color-gray-4)"
          stroke-width="2"></line>
        <polygon
          stroke="var(--sl-color-gray-4)"
          stroke-width="2"
          fill="var(--sl-color-gray-4)"
          fill-rule="nonzero"
          points="420 97.76 416 89.76 424 89.76"></polygon>
        <polygon
          fill="var(--sl-color-black)"
          stroke="#CCCCCC"
          stroke-width="4"
          points="200 285 300 385 200 485 100 385"></polygon>
        <text
          fill="var(--sl-color-white)"
          fill-rule="nonzero"
          font-family="HelveticaNeue, Helvetica Neue"
          font-size="16"
          font-weight="normal"
        >
          <tspan x="132.28" y="381"> Setup MUST share </tspan>
          <tspan x="145.776" y="399"> state with tests </tspan>
        </text>
        <line
          x1="370"
          y1="250"
          x2="256.72"
          y2="330.24"
          stroke="var(--sl-color-gray-4)"
          stroke-width="2"></line>
        <g transform="translate(280.000000, 274.000000)">
          <rect fill="var(--sl-color-black)" x="0" y="0" width="58" height="36"
          ></rect>
          <text
            fill-rule="nonzero"
            font-family="HelveticaNeue, Helvetica Neue"
            font-size="16"
            font-weight="normal"
            fill="var(--sl-color-white)"
          >
            <tspan x="14.244" y="23.5"> YES </tspan>
          </text>
        </g>
        <polygon
          stroke="var(--sl-color-gray-4)"
          stroke-width="2"
          fill="var(--sl-color-gray-4)"
          fill-rule="nonzero"
          points="251.82 333.71 256.04 325.82 256.72
      330.24 260.66 332.35"
        ></polygon>
        <a href="#root-hook-plugins">
          <g transform="translate(0.000000, 580.000000)">
            <rect
              fill="var(--sl-color-black)"
              stroke="var(--sl-color-mocha-light)"
              stroke-width="4"
              x="0"
              y="0"
              width="180"
              height="80"
              rx="12"></rect>
            <text
              fill="var(--sl-color-white)"
              fill-rule="nonzero"
              font-family="HelveticaNeue-Bold, Helvetica Neue"
              font-size="16"
              font-weight="bold"
            >
              <tspan x="11.828" y="37"> Use Root Hooks and </tspan>
              <tspan x="14.676" y="56"> Avoid Parallel Mode </tspan>
            </text>
          </g>
        </a>
        <line
          x1="150"
          y1="435"
          x2="93.15"
          y2="572.39"
          stroke="var(--sl-color-gray-4)"
          stroke-width="2"></line>
        <polygon
          stroke="var(--sl-color-gray-4)"
          stroke-width="2"
          fill="var(--sl-color-gray-4)"
          fill-rule="nonzero"
          points="90.85 577.93 90.22 569.01 93.15 572.39 97.61 572.07"
        ></polygon>
        <line
          x1="250"
          y1="435"
          x2="306.85"
          y2="572.39"
          stroke="var(--sl-color-gray-4)"
          stroke-width="2"></line>
        <polygon
          stroke="var(--sl-color-gray-4)"
          stroke-width="2"
          fill="var(--sl-color-gray-4)"
          fill-rule="nonzero"
          points="309.15 577.93 302.39 572.07 306.85 572.39 309.78 569.01"
        ></polygon>
        <a href="#global-fixtures">
          <g transform="translate(220.000000, 580.000000)">
            <rect
              fill="var(--sl-color-black)"
              stroke="var(--sl-color-mocha-light)"
              stroke-width="4"
              x="0"
              y="0"
              width="180"
              height="80"
              rx="12"></rect>
            <text
              fill="var(--sl-color-white)"
              fill-rule="nonzero"
              font-family="HelveticaNeue-Bold, Helvetica Neue"
              font-size="16"
              font-weight="bold"
            >
              <tspan x="15.648" y="45"> Use Global Fixtures </tspan>
            </text>
          </g>
        </a>
        <polygon
          fill="var(--sl-color-black)"
          stroke="#CCCCCC"
          stroke-width="4"
          points="650 285 750 385 650 485 550 385"></polygon>
        <text
          fill="var(--sl-color-white)"
          fill-rule="nonzero"
          font-family="HelveticaNeue, Helvetica Neue"
          font-size="16"
          font-weight="normal"
        >
          <tspan x="580.352" y="381"> Should setup affect </tspan>
          <tspan x="569.544" y="399"> tests across ALL files? </tspan>
        </text>
        <line
          x1="470"
          y1="250"
          x2="593.11"
          y2="330.49"
          stroke="var(--sl-color-gray-4)"
          stroke-width="2"></line>
        <polygon
          stroke="var(--sl-color-gray-4)"
          stroke-width="2"
          fill="var(--sl-color-gray-4)"
          fill-rule="nonzero"
          points="598.13 333.78 589.24 332.75 593.11 330.49 593.62 326.05"
        ></polygon>
        <a href="#root-hook-plugins">
          <g transform="translate(444.000000, 580.000000)">
            <rect
              fill="var(--sl-color-black)"
              stroke="var(--sl-color-mocha-light)"
              stroke-width="4"
              x="0"
              y="0"
              width="180"
              height="80"
              rx="12"></rect>
            <text
              fill="var(--sl-color-white)"
              fill-rule="nonzero"
              font-family="HelveticaNeue-Bold, Helvetica Neue"
              font-size="16"
              font-weight="bold"
            >
              <tspan x="26.776" y="45"> Use Root Hooks </tspan>
            </text>
          </g>
        </a>
        <a href="#hooks">
          <g transform="translate(670.000000, 580.000000)">
            <rect
              fill="var(--sl-color-black)"
              stroke="var(--sl-color-mocha-light)"
              stroke-width="4"
              x="0"
              y="0"
              width="180"
              height="80"
              rx="12"></rect>
            <text
              fill="var(--sl-color-white)"
              fill-rule="nonzero"
              font-family="HelveticaNeue-Bold, Helvetica Neue"
              font-size="16"
              font-weight="bold"
            >
              <tspan x="27.344" y="45"> Use Plain Hooks </tspan>
            </text>
          </g>
        </a>
        <line
          x1="600"
          y1="435"
          x2="537.41"
          y2="572.5"
          stroke="var(--sl-color-gray-4)"
          stroke-width="2"></line>
        <g transform="translate(91.000000, 486.000000)">
          <rect fill="var(--sl-color-black)" x="0" y="0" width="58" height="36"
          ></rect>
          <text
            fill-rule="nonzero"
            font-family="HelveticaNeue, Helvetica Neue"
            font-size="16"
            font-weight="normal"
            fill="var(--sl-color-white)"
          >
            <tspan x="14.244" y="23.5"> YES </tspan>
          </text>
        </g>
        <g transform="translate(506.000000, 272.000000)">
          <rect fill="var(--sl-color-black)" x="0" y="0" width="58" height="36"
          ></rect>
          <text
            fill-rule="nonzero"
            font-family="HelveticaNeue, Helvetica Neue"
            font-size="16"
            font-weight="normal"
            fill="var(--sl-color-white)"
          >
            <tspan x="17.144" y="24"> NO </tspan>
          </text>
        </g>
        <g transform="translate(252.000000, 485.000000)">
          <rect fill="var(--sl-color-black)" x="0" y="0" width="58" height="36"
          ></rect>
          <text
            fill-rule="nonzero"
            font-family="HelveticaNeue, Helvetica Neue"
            font-size="16"
            font-weight="normal"
            fill="var(--sl-color-white)"
          >
            <tspan x="17.144" y="24"> NO </tspan>
          </text>
        </g>
        <polygon
          stroke="var(--sl-color-gray-4)"
          stroke-width="2"
          fill="var(--sl-color-gray-4)"
          fill-rule="nonzero"
          points="534.93 577.96 534.6 569.03 537.41 572.5 541.88 572.34"
        ></polygon>
        <line
          x1="700"
          y1="435"
          x2="756.85"
          y2="572.39"
          stroke="var(--sl-color-gray-4)"
          stroke-width="2"></line>
        <polygon
          stroke="var(--sl-color-gray-4)"
          stroke-width="2"
          fill="var(--sl-color-gray-4)"
          fill-rule="nonzero"
          points="759.15 577.93 752.39 572.07 756.85 572.39 759.78 569.01"
        ></polygon>
        <g transform="translate(540.000000, 485.000000)">
          <rect fill="var(--sl-color-black)" x="0" y="0" width="58" height="36"
          ></rect>
          <text
            fill-rule="nonzero"
            font-family="HelveticaNeue, Helvetica Neue"
            font-size="16"
            font-weight="normal"
            fill="var(--sl-color-white)"
          >
            <tspan x="14.244" y="23.5"> YES </tspan>
          </text>
        </g>
        <g transform="translate(699.000000, 489.000000)">
          <rect fill="var(--sl-color-black)" x="0" y="0" width="58" height="36"
          ></rect>
          <text
            fill-rule="nonzero"
            font-family="HelveticaNeue, Helvetica Neue"
            font-size="16"
            font-weight="normal"
            fill="var(--sl-color-white)"
          >
            <tspan x="17.144" y="24"> NO </tspan>
          </text>
        </g>
      </g>
    </g>
  </svg>
</div>
