mermaid issue: language/API for manual layout and design

coordinates.diagrams.net.svg

coordinates.svg

coordinates2.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-64 -24 456 148">
    <symbol id="coordinate" width="10" height="10" viewBox="0 0 10 10" refX="5"
            refY="5" markerWidth="12" markerHeight="12">
        <path d="M 0,0 L 10,10 M 10,0 L 0,10" stroke="red"></path>
    </symbol>
    <rect width="100" height="100" fill="none" stroke="black"></rect>
    <rect x="228" width="100" height="100" fill="none" stroke="#888"></rect>
    <circle x="228" radius="50" fill="none" stroke="black" cx="278" cy="50"
            r="50"></circle>
    <text dominant-baseline="central" font-size="10px" text-anchor="middle"
          x="50" y="59">center
    </text>
    <use href="#coordinate" x="45" y="45"></use>
    <text dominant-baseline="central" font-size="10px" text-anchor="middle"
          x="50" y="-11">north
    </text>
    <use href="#coordinate" x="45" y="-5"></use>
    <text dominant-baseline="central" font-size="10px" x="108" y="-5">
        northEast
    </text>
    <use href="#coordinate" x="95" y="-5"></use>
    <text dominant-baseline="central" font-size="10px" x="108" y="50">east
    </text>
    <use href="#coordinate" x="95" y="45"></use>
    <text dominant-baseline="central" font-size="10px" x="108" y="105">
        southEast
    </text>
    <use href="#coordinate" x="95" y="95"></use>
    <text dominant-baseline="central" font-size="10px" text-anchor="middle"
          x="50" y="111">south
    </text>
    <use href="#coordinate" x="45" y="95"></use>
    <text dominant-baseline="central" font-size="10px" text-anchor="end" x="-8"
          y="105">southWest
    </text>
    <use href="#coordinate" x="-5" y="95"></use>
    <text dominant-baseline="central" font-size="10px" text-anchor="end" x="-8"
          y="50">west
    </text>
    <use href="#coordinate" x="-5" y="45"></use>
    <text dominant-baseline="central" font-size="10px" text-anchor="end" x="-8"
          y="-5">northWest
    </text>
    <use href="#coordinate" x="-5" y="-5"></use>
    <text dominant-baseline="central" font-size="10px" text-anchor="middle"
          x="278" y="59">center
    </text>
    <use href="#coordinate" x="273" y="45"></use>
    <text dominant-baseline="central" font-size="10px" text-anchor="middle"
          x="278" y="-11">north
    </text>
    <use href="#coordinate" x="273" y="-5"></use>
    <text dominant-baseline="central" font-size="10px" x="336" y="-5">
        northEast
    </text>
    <use href="#coordinate" x="323" y="-5"></use>
    <text dominant-baseline="central" font-size="10px" x="336" y="50">east
    </text>
    <use href="#coordinate" x="323" y="45"></use>
    <text dominant-baseline="central" font-size="10px" x="336" y="105">
        southEast
    </text>
    <use href="#coordinate" x="323" y="95"></use>
    <text dominant-baseline="central" font-size="10px" text-anchor="middle"
          x="278" y="111">south
    </text>
    <use href="#coordinate" x="273" y="95"></use>
    <text dominant-baseline="central" font-size="10px" text-anchor="end" x="220"
          y="105">southWest
    </text>
    <use href="#coordinate" x="223" y="95"></use>
    <text dominant-baseline="central" font-size="10px" text-anchor="end" x="220"
          y="50">west
    </text>
    <use href="#coordinate" x="223" y="45"></use>
    <text dominant-baseline="central" font-size="10px" text-anchor="end" x="220"
          y="-5">northWest
    </text>
    <use href="#coordinate" x="223" y="-5"></use>
</svg>

flowchart-example-2.svg

flowchart-example.svg

git-workflow-example.svg