search

terrastruct / text-to-diagram-site

Compare syntax, layouts, outputs between languages for generating diagrams with text.
https://text-to-diagram.com
GNU General Public License v3.0
410 stars 18 forks source link

ci: Run ./ci/render.sh to ensure diagrams are up to date #34

Open nhooyr opened 1 year ago

nhooyr commented 1 year ago

Will need to install the various tools and set TSTRUCT_TOKEN for tala.

nhooyr commented 1 year ago

Another issue here will be that mmdc seems to always cause the output svgs to be updated even if the input mermaid didn't change.

nhooyr commented 1 year ago

Looks like SVGs include a randomly generated ID to make the css classes unique.

grep -o -m1 'id="mermaid-[0-9]*"' ./src/examples/0_basic/render/mermaid_dagre.svg | sed 's#id="\(mermaid-[0-9]*\)"#\1#'

Can just replace the generated ID with a constant one based on the example name. I'm surprised mermaid doesn't use inline CSS.

alixander commented 1 year ago

oh, yeah we do something like that too, except our ID is a hash on the diagram attributes, so unique per diagram, which is rly all that's needed (and is deterministic).

nhooyr commented 1 year ago

Oh very clever!

aloisklink commented 1 year ago

Looks like SVGs include a randomly generated ID to make the css classes unique.

I believe the deterministicIds Mermaid Configuration variable might help you:

https://mermaid-js.github.io/mermaid/#/Setup?id=deterministicids

I'm not sure why that value isn't true by default (maybe there is some downside).

I'm surprised mermaid doesn't use inline CSS.

Yep, that's currently a pretty big issue with Mermaid. It means websites that have strict Content Security Policy rules break rendering Mermaid diagrams.

nhooyr commented 1 year ago

Nice @aloisklink

I tried it out in https://github.com/terrastruct/text-to-diagram-site/pull/33/commits/f770e77a710341dc3c74e6e301cf4a0a535b6ba8 but for some reason example 6 still changes between every run. Here's an example diff:

diff --git a/src/examples/6_tables/render/mermaid_dagre.svg b/src/examples/6_tables/render/mermaid_dagre.svg
index acf584d..937a654 100644
--- a/src/examples/6_tables/render/mermaid_dagre.svg
+++ b/src/examples/6_tables/render/mermaid_dagre.svg
@@ -1 +1 @@
-<svg aria-labelledby="chart-title-mermaid-0 chart-desc-mermaid-0" role="img" viewBox="-52.191131591796875 0 429.106201171875 364" style="max-width: 429.106px; background-color: white;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="100%" id="mermaid-0"><title id="chart-title-mermaid-0"/><desc id="chart-desc-mermaid-0"/><style>#mermaid-0 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-0 .error-icon{fill:#552222;}#mermaid-0 .error-text{fill:#552222;stroke:#552222;}#mermaid-0 .edge-thickness-normal{stroke-width:2px;}#mermaid-0 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-0 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-0 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-0 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-0 .marker{fill:#333333;stroke:#333333;}#mermaid-0 .marker.cross{stroke:#333333;}#mermaid-0 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-0 .entityBox{fill:#ECECFF;stroke:#9370DB;}#mermaid-0 .attributeBoxOdd{fill:#ffffff;stroke:#9370DB;}#mermaid-0 .attributeBoxEven{fill:#f2f2f2;stroke:#9370DB;}#mermaid-0 .relationshipLabelBox{fill:hsl(80, 100%, 96.2745098039%);opacity:0.7;background-color:hsl(80, 100%, 96.2745098039%);}#mermaid-0 .relationshipLabelBox rect{opacity:0.5;}#mermaid-0 .relationshipLine{stroke:#333333;}#mermaid-0 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g/><defs><marker orient="auto" markerHeight="18" markerWidth="18" refY="9" refX="0" id="ONLY_ONE_START"><path d="M9,0 L9,18 M15,0 L15,18" fill="none" stroke="gray"/></marker></defs><defs><marker orient="auto" markerHeight="18" markerWidth="18" refY="9" refX="18" id="ONLY_ONE_END"><path d="M3,0 L3,18 M9,0 L9,18" fill="none" stroke="gray"/></marker></defs><defs><marker orient="auto" markerHeight="18" markerWidth="30" refY="9" refX="0" id="ZERO_OR_ONE_START"><circle r="6" cy="9" cx="21" fill="white" stroke="gray"/><path d="M9,0 L9,18" fill="none" stroke="gray"/></marker></defs><defs><marker orient="auto" markerHeight="18" markerWidth="30" refY="9" refX="30" id="ZERO_OR_ONE_END"><circle r="6" cy="9" cx="9" fill="white" stroke="gray"/><path d="M21,0 L21,18" fill="none" stroke="gray"/></marker></defs><defs><marker orient="auto" markerHeight="36" markerWidth="45" refY="18" refX="18" id="ONE_OR_MORE_START"><path d="M0,18 Q 18,0 36,18 Q 18,36 0,18 M42,9 L42,27" fill="none" stroke="gray"/></marker></defs><defs><marker orient="auto" markerHeight="36" markerWidth="45" refY="18" refX="27" id="ONE_OR_MORE_END"><path d="M3,9 L3,27 M9,18 Q27,0 45,18 Q27,36 9,18" fill="none" stroke="gray"/></marker></defs><defs><marker orient="auto" markerHeight="36" markerWidth="57" refY="18" refX="18" id="ZERO_OR_MORE_START"><circle r="6" cy="18" cx="48" fill="white" stroke="gray"/><path d="M0,18 Q18,0 36,18 Q18,36 0,18" fill="none" stroke="gray"/></marker></defs><defs><marker orient="auto" markerHeight="36" markerWidth="57" refY="18" refX="39" id="ZERO_OR_MORE_END"><circle r="6" cy="18" cx="9" fill="white" stroke="gray"/><path d="M21,18 Q39,0 57,18 Q39,36 21,18" fill="none" stroke="gray"/></marker></defs><path marker-start="url(#ONLY_ONE_START)" marker-end="url(#ZERO_OR_MORE_END)" fill="none" stroke="gray" d="M125.76891447368422,110L116.47409539473684,118.33333333333333C107.17927631578948,126.66666666666667,88.58963815789474,143.33333333333334,79.29481907894737,165.5C70,187.66666666666666,70,215.33333333333334,70,229.16666666666666L70,243" class="er relationshipLine"/><path marker-start="url(#ONLY_ONE_START)" marker-end="url(#ZERO_OR_MORE_END)" fill="none" stroke="gray" d="M226.15296052631578,110L235.44777960526315,118.33333333333333C244.74259868421052,126.66666666666667,263.33223684210526,143.33333333333334,272.62705592105266,160C281.921875,176.66666666666666,281.921875,193.33333333333334,281.921875,201.66666666666666L281.921875,210" class="er relationshipLine"/><g transform="translate(220,210 )" id="entity-CAR-3c7592a5-922f-42e8-8298-4ee6233ec8f5"><rect height="134" width="123.84375" y="0" x="0" stroke="gray" fill-opacity="100%" fill="honeydew" class="er entityBox"/><text transform="translate(61.921875,12)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 12px" text-anchor="middle" dominant-baseline="middle" y="0" x="0" id="text-entity-CAR-3c7592a5-922f-42e8-8298-4ee6233ec8f5" class="er entityLabel">CAR</text><rect height="22" width="58.671875" y="24" x="0" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxOdd"/><text transform="translate(5,35)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-CAR-3c7592a5-922f-42e8-8298-4ee6233ec8f5-attr-1-type" class="er entityLabel">int</text><rect height="22" width="65.171875" y="24" x="58.671875" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxOdd"/><text transform="translate(63.671875,35)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-CAR-3c7592a5-922f-42e8-8298-4ee6233ec8f5-attr-1-name" class="er entityLabel">id</text><rect height="22" width="58.671875" y="46" x="0" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxEven"/><text transform="translate(5,57)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-CAR-3c7592a5-922f-42e8-8298-4ee6233ec8f5-attr-2-type" class="er entityLabel">timestamp</text><rect height="22" width="65.171875" y="46" x="58.671875" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxEven"/><text transform="translate(63.671875,57)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-CAR-3c7592a5-922f-42e8-8298-4ee6233ec8f5-attr-2-name" class="er entityLabel">lastUpdated</text><rect height="22" width="58.671875" y="68" x="0" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxOdd"/><text transform="translate(5,79)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-CAR-3c7592a5-922f-42e8-8298-4ee6233ec8f5-attr-3-type" class="er entityLabel">string</text><rect height="22" width="65.171875" y="68" x="58.671875" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxOdd"/><text transform="translate(63.671875,79)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-CAR-3c7592a5-922f-42e8-8298-4ee6233ec8f5-attr-3-name" class="er entityLabel">make</text><rect height="22" width="58.671875" y="90" x="0" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxEven"/><text transform="translate(5,101)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-CAR-3c7592a5-922f-42e8-8298-4ee6233ec8f5-attr-4-type" class="er entityLabel">string</text><rect height="22" width="65.171875" y="90" x="58.671875" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxEven"/><text transform="translate(63.671875,101)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-CAR-3c7592a5-922f-42e8-8298-4ee6233ec8f5-attr-4-name" class="er entityLabel">model</text><rect height="22" width="58.671875" y="112" x="0" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxOdd"/><text transform="translate(5,123)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-CAR-3c7592a5-922f-42e8-8298-4ee6233ec8f5-attr-5-type" class="er entityLabel">int</text><rect height="22" width="65.171875" y="112" x="58.671875" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxOdd"/><text transform="translate(63.671875,123)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-CAR-3c7592a5-922f-42e8-8298-4ee6233ec8f5-attr-5-name" class="er entityLabel">year</text></g><g transform="translate(20,243 )" id="entity-FACTORY-7e3c5266-3e7f-4fb7-b675-8b1afb005c74"><rect height="68" width="100" y="0" x="0" stroke="gray" fill-opacity="100%" fill="honeydew" class="er entityBox"/><text transform="translate(50,12)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 12px" text-anchor="middle" dominant-baseline="middle" y="0" x="0" id="text-entity-FACTORY-7e3c5266-3e7f-4fb7-b675-8b1afb005c74" class="er entityLabel">FACTORY</text><rect height="22" width="45.515625" y="24" x="0" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxOdd"/><text transform="translate(5,35)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-FACTORY-7e3c5266-3e7f-4fb7-b675-8b1afb005c74-attr-1-type" class="er entityLabel">int</text><rect height="22" width="54.484375" y="24" x="45.515625" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxOdd"/><text transform="translate(50.515625,35)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-FACTORY-7e3c5266-3e7f-4fb7-b675-8b1afb005c74-attr-1-name" class="er entityLabel">id</text><rect height="22" width="45.515625" y="46" x="0" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxEven"/><text transform="translate(5,57)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-FACTORY-7e3c5266-3e7f-4fb7-b675-8b1afb005c74-attr-2-type" class="er entityLabel">string</text><rect height="22" width="54.484375" y="46" x="45.515625" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxEven"/><text transform="translate(50.515625,57)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-FACTORY-7e3c5266-3e7f-4fb7-b675-8b1afb005c74-attr-2-name" class="er entityLabel">country</text></g><g transform="translate(96.4375,20 )" id="entity-FACTORYCARSUPPORT-b920aef1-5d72-4b2d-8efe-10e600b1ec15"><rect height="90" width="159.046875" y="0" x="0" stroke="gray" fill-opacity="100%" fill="honeydew" class="er entityBox"/><text transform="translate(79.5234375,12)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 12px" text-anchor="middle" dominant-baseline="middle" y="0" x="0" id="text-entity-FACTORYCARSUPPORT-b920aef1-5d72-4b2d-8efe-10e600b1ec15" class="er entityLabel">FACTORY_CAR_SUPPORT</text><rect height="22" width="69.44140625" y="24" x="0" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxOdd"/><text transform="translate(5,35)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-FACTORYCARSUPPORT-b920aef1-5d72-4b2d-8efe-10e600b1ec15-attr-1-type" class="er entityLabel">int</text><rect height="22" width="89.60546875" y="24" x="69.44140625" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxOdd"/><text transform="translate(74.44140625,35)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-FACTORYCARSUPPORT-b920aef1-5d72-4b2d-8efe-10e600b1ec15-attr-1-name" class="er entityLabel">id</text><rect height="22" width="69.44140625" y="46" x="0" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxEven"/><text transform="translate(5,57)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-FACTORYCARSUPPORT-b920aef1-5d72-4b2d-8efe-10e600b1ec15-attr-2-type" class="er entityLabel">int</text><rect height="22" width="89.60546875" y="46" x="69.44140625" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxEven"/><text transform="translate(74.44140625,57)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-FACTORYCARSUPPORT-b920aef1-5d72-4b2d-8efe-10e600b1ec15-attr-2-name" class="er entityLabel">factory</text><rect height="22" width="69.44140625" y="68" x="0" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxOdd"/><text transform="translate(5,79)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-FACTORYCARSUPPORT-b920aef1-5d72-4b2d-8efe-10e600b1ec15-attr-3-type" class="er entityLabel">int</text><rect height="22" width="89.60546875" y="68" x="69.44140625" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxOdd"/><text transform="translate(74.44140625,79)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-FACTORYCARSUPPORT-b920aef1-5d72-4b2d-8efe-10e600b1ec15-attr-3-name" class="er entityLabel">car</text></g><rect fill-opacity="85%" fill="white" height="14" width="220.9140625" y="161.07373046875" x="-32.19111633300781" class="er relationshipLabelBox"/><text style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 12px" dominant-baseline="middle" text-anchor="middle" y="168.07373046875" x="78.26591491699219" id="rel1" class="er relationshipLabel">factory_car_support.factory -&gt; factory.id</text><rect fill-opacity="85%" fill="white" height="14" width="177.6796875" y="145.8057861328125" x="179.23538208007812" class="er relationshipLabelBox"/><text style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 12px" dominant-baseline="middle" text-anchor="middle" y="152.8057861328125" x="268.0752258300781" id="rel2" class="er relationshipLabel">factory_car_support.car -&gt; car.id</text></svg>
\ No newline at end of file
+<svg aria-labelledby="chart-title-mermaid-0 chart-desc-mermaid-0" role="img" viewBox="-52.191131591796875 0 429.106201171875 364" style="max-width: 429.106px; background-color: white;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="100%" id="mermaid-0"><title id="chart-title-mermaid-0"/><desc id="chart-desc-mermaid-0"/><style>#mermaid-0 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-0 .error-icon{fill:#552222;}#mermaid-0 .error-text{fill:#552222;stroke:#552222;}#mermaid-0 .edge-thickness-normal{stroke-width:2px;}#mermaid-0 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-0 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-0 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-0 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-0 .marker{fill:#333333;stroke:#333333;}#mermaid-0 .marker.cross{stroke:#333333;}#mermaid-0 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-0 .entityBox{fill:#ECECFF;stroke:#9370DB;}#mermaid-0 .attributeBoxOdd{fill:#ffffff;stroke:#9370DB;}#mermaid-0 .attributeBoxEven{fill:#f2f2f2;stroke:#9370DB;}#mermaid-0 .relationshipLabelBox{fill:hsl(80, 100%, 96.2745098039%);opacity:0.7;background-color:hsl(80, 100%, 96.2745098039%);}#mermaid-0 .relationshipLabelBox rect{opacity:0.5;}#mermaid-0 .relationshipLine{stroke:#333333;}#mermaid-0 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g/><defs><marker orient="auto" markerHeight="18" markerWidth="18" refY="9" refX="0" id="ONLY_ONE_START"><path d="M9,0 L9,18 M15,0 L15,18" fill="none" stroke="gray"/></marker></defs><defs><marker orient="auto" markerHeight="18" markerWidth="18" refY="9" refX="18" id="ONLY_ONE_END"><path d="M3,0 L3,18 M9,0 L9,18" fill="none" stroke="gray"/></marker></defs><defs><marker orient="auto" markerHeight="18" markerWidth="30" refY="9" refX="0" id="ZERO_OR_ONE_START"><circle r="6" cy="9" cx="21" fill="white" stroke="gray"/><path d="M9,0 L9,18" fill="none" stroke="gray"/></marker></defs><defs><marker orient="auto" markerHeight="18" markerWidth="30" refY="9" refX="30" id="ZERO_OR_ONE_END"><circle r="6" cy="9" cx="9" fill="white" stroke="gray"/><path d="M21,0 L21,18" fill="none" stroke="gray"/></marker></defs><defs><marker orient="auto" markerHeight="36" markerWidth="45" refY="18" refX="18" id="ONE_OR_MORE_START"><path d="M0,18 Q 18,0 36,18 Q 18,36 0,18 M42,9 L42,27" fill="none" stroke="gray"/></marker></defs><defs><marker orient="auto" markerHeight="36" markerWidth="45" refY="18" refX="27" id="ONE_OR_MORE_END"><path d="M3,9 L3,27 M9,18 Q27,0 45,18 Q27,36 9,18" fill="none" stroke="gray"/></marker></defs><defs><marker orient="auto" markerHeight="36" markerWidth="57" refY="18" refX="18" id="ZERO_OR_MORE_START"><circle r="6" cy="18" cx="48" fill="white" stroke="gray"/><path d="M0,18 Q18,0 36,18 Q18,36 0,18" fill="none" stroke="gray"/></marker></defs><defs><marker orient="auto" markerHeight="36" markerWidth="57" refY="18" refX="39" id="ZERO_OR_MORE_END"><circle r="6" cy="18" cx="9" fill="white" stroke="gray"/><path d="M21,18 Q39,0 57,18 Q39,36 21,18" fill="none" stroke="gray"/></marker></defs><path marker-start="url(#ONLY_ONE_START)" marker-end="url(#ZERO_OR_MORE_END)" fill="none" stroke="gray" d="M125.76891447368422,110L116.47409539473684,118.33333333333333C107.17927631578948,126.66666666666667,88.58963815789474,143.33333333333334,79.29481907894737,165.5C70,187.66666666666666,70,215.33333333333334,70,229.16666666666666L70,243" class="er relationshipLine"/><path marker-start="url(#ONLY_ONE_START)" marker-end="url(#ZERO_OR_MORE_END)" fill="none" stroke="gray" d="M226.15296052631578,110L235.44777960526315,118.33333333333333C244.74259868421052,126.66666666666667,263.33223684210526,143.33333333333334,272.62705592105266,160C281.921875,176.66666666666666,281.921875,193.33333333333334,281.921875,201.66666666666666L281.921875,210" class="er relationshipLine"/><g transform="translate(220,210 )" id="entity-CAR-64bc8cd5-a746-470f-bba7-3ebe71b2ee30"><rect height="134" width="123.84375" y="0" x="0" stroke="gray" fill-opacity="100%" fill="honeydew" class="er entityBox"/><text transform="translate(61.921875,12)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 12px" text-anchor="middle" dominant-baseline="middle" y="0" x="0" id="text-entity-CAR-64bc8cd5-a746-470f-bba7-3ebe71b2ee30" class="er entityLabel">CAR</text><rect height="22" width="58.671875" y="24" x="0" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxOdd"/><text transform="translate(5,35)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-CAR-64bc8cd5-a746-470f-bba7-3ebe71b2ee30-attr-1-type" class="er entityLabel">int</text><rect height="22" width="65.171875" y="24" x="58.671875" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxOdd"/><text transform="translate(63.671875,35)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-CAR-64bc8cd5-a746-470f-bba7-3ebe71b2ee30-attr-1-name" class="er entityLabel">id</text><rect height="22" width="58.671875" y="46" x="0" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxEven"/><text transform="translate(5,57)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-CAR-64bc8cd5-a746-470f-bba7-3ebe71b2ee30-attr-2-type" class="er entityLabel">timestamp</text><rect height="22" width="65.171875" y="46" x="58.671875" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxEven"/><text transform="translate(63.671875,57)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-CAR-64bc8cd5-a746-470f-bba7-3ebe71b2ee30-attr-2-name" class="er entityLabel">lastUpdated</text><rect height="22" width="58.671875" y="68" x="0" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxOdd"/><text transform="translate(5,79)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-CAR-64bc8cd5-a746-470f-bba7-3ebe71b2ee30-attr-3-type" class="er entityLabel">string</text><rect height="22" width="65.171875" y="68" x="58.671875" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxOdd"/><text transform="translate(63.671875,79)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-CAR-64bc8cd5-a746-470f-bba7-3ebe71b2ee30-attr-3-name" class="er entityLabel">make</text><rect height="22" width="58.671875" y="90" x="0" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxEven"/><text transform="translate(5,101)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-CAR-64bc8cd5-a746-470f-bba7-3ebe71b2ee30-attr-4-type" class="er entityLabel">string</text><rect height="22" width="65.171875" y="90" x="58.671875" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxEven"/><text transform="translate(63.671875,101)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-CAR-64bc8cd5-a746-470f-bba7-3ebe71b2ee30-attr-4-name" class="er entityLabel">model</text><rect height="22" width="58.671875" y="112" x="0" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxOdd"/><text transform="translate(5,123)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-CAR-64bc8cd5-a746-470f-bba7-3ebe71b2ee30-attr-5-type" class="er entityLabel">int</text><rect height="22" width="65.171875" y="112" x="58.671875" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxOdd"/><text transform="translate(63.671875,123)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-CAR-64bc8cd5-a746-470f-bba7-3ebe71b2ee30-attr-5-name" class="er entityLabel">year</text></g><g transform="translate(20,243 )" id="entity-FACTORY-705477fb-04b0-463c-8a35-800309c47a88"><rect height="68" width="100" y="0" x="0" stroke="gray" fill-opacity="100%" fill="honeydew" class="er entityBox"/><text transform="translate(50,12)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 12px" text-anchor="middle" dominant-baseline="middle" y="0" x="0" id="text-entity-FACTORY-705477fb-04b0-463c-8a35-800309c47a88" class="er entityLabel">FACTORY</text><rect height="22" width="45.515625" y="24" x="0" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxOdd"/><text transform="translate(5,35)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-FACTORY-705477fb-04b0-463c-8a35-800309c47a88-attr-1-type" class="er entityLabel">int</text><rect height="22" width="54.484375" y="24" x="45.515625" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxOdd"/><text transform="translate(50.515625,35)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-FACTORY-705477fb-04b0-463c-8a35-800309c47a88-attr-1-name" class="er entityLabel">id</text><rect height="22" width="45.515625" y="46" x="0" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxEven"/><text transform="translate(5,57)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-FACTORY-705477fb-04b0-463c-8a35-800309c47a88-attr-2-type" class="er entityLabel">string</text><rect height="22" width="54.484375" y="46" x="45.515625" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxEven"/><text transform="translate(50.515625,57)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-FACTORY-705477fb-04b0-463c-8a35-800309c47a88-attr-2-name" class="er entityLabel">country</text></g><g transform="translate(96.4375,20 )" id="entity-FACTORYCARSUPPORT-1365aaee-dc15-43af-b306-8bc590c1640b"><rect height="90" width="159.046875" y="0" x="0" stroke="gray" fill-opacity="100%" fill="honeydew" class="er entityBox"/><text transform="translate(79.5234375,12)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 12px" text-anchor="middle" dominant-baseline="middle" y="0" x="0" id="text-entity-FACTORYCARSUPPORT-1365aaee-dc15-43af-b306-8bc590c1640b" class="er entityLabel">FACTORY_CAR_SUPPORT</text><rect height="22" width="69.44140625" y="24" x="0" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxOdd"/><text transform="translate(5,35)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-FACTORYCARSUPPORT-1365aaee-dc15-43af-b306-8bc590c1640b-attr-1-type" class="er entityLabel">int</text><rect height="22" width="89.60546875" y="24" x="69.44140625" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxOdd"/><text transform="translate(74.44140625,35)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-FACTORYCARSUPPORT-1365aaee-dc15-43af-b306-8bc590c1640b-attr-1-name" class="er entityLabel">id</text><rect height="22" width="69.44140625" y="46" x="0" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxEven"/><text transform="translate(5,57)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-FACTORYCARSUPPORT-1365aaee-dc15-43af-b306-8bc590c1640b-attr-2-type" class="er entityLabel">int</text><rect height="22" width="89.60546875" y="46" x="69.44140625" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxEven"/><text transform="translate(74.44140625,57)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-FACTORYCARSUPPORT-1365aaee-dc15-43af-b306-8bc590c1640b-attr-2-name" class="er entityLabel">factory</text><rect height="22" width="69.44140625" y="68" x="0" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxOdd"/><text transform="translate(5,79)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-FACTORYCARSUPPORT-1365aaee-dc15-43af-b306-8bc590c1640b-attr-3-type" class="er entityLabel">int</text><rect height="22" width="89.60546875" y="68" x="69.44140625" stroke="gray" fill-opacity="100%" fill="honeydew" class="er attributeBoxOdd"/><text transform="translate(74.44140625,79)" style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 10.2px" text-anchor="left" dominant-baseline="middle" y="0" x="0" id="text-entity-FACTORYCARSUPPORT-1365aaee-dc15-43af-b306-8bc590c1640b-attr-3-name" class="er entityLabel">car</text></g><rect fill-opacity="85%" fill="white" height="14" width="220.9140625" y="161.07373046875" x="-32.19111633300781" class="er relationshipLabelBox"/><text style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 12px" dominant-baseline="middle" text-anchor="middle" y="168.07373046875" x="78.26591491699219" id="rel1" class="er relationshipLabel">factory_car_support.factory -&gt; factory.id</text><rect fill-opacity="85%" fill="white" height="14" width="177.6796875" y="145.8057861328125" x="179.23538208007812" class="er relationshipLabelBox"/><text style="font-family: &quot;trebuchet ms&quot;, verdana, arial, sans-serif;; font-size: 12px" dominant-baseline="middle" text-anchor="middle" y="152.8057861328125" x="268.0752258300781" id="rel2" class="er relationshipLabel">factory_car_support.car -&gt; car.id</text></svg>
\ No newline at end of file

id="entity-CAR- changes across each run. Only this example for some reason, all the other examples seem fine. Any ideas?

mmd code is at https://raw.githubusercontent.com/terrastruct/text-to-diagram-site/whitespace-2eec/src/examples/6_tables/syntax/mermaid.mmd

aloisklink commented 1 year ago

id="entity-CAR- changes across each run. Only this example for some reason, all the other examples seem fine. Any ideas?

It looks like you've encountered a bug! I've got a fix pending in https://github.com/mermaid-js/mermaid/pull/3916, but it will probably take a while (a few weeks) to get released, unfortunately.