travisshears/mermaid_diagram_creator
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

get basic svg test working

Browse source
This commit is contained in:
Travis Shears 2026-03-20 10:46:43 +01:00
parent 7cce883993
commit 48040a4f56
Signed by: travisshears
GPG key ID: CB9BF1910F3F7469
2 changed files with 65 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

10
index.ts
View file

@ -1 +1,9 @@
console.log("Hello via Bun!"); import { renderMermaidSVG } from "beautiful-mermaid";
const svg = renderMermaidSVG(`
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Action]
B -->|No| D[End]
`);
console.log(svg);

56
test.svg Normal file
View file

@ -0,0 +1,56 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 279.69000000000005 435.91999999999996" width="279.69000000000005" height="435.91999999999996" style="--bg:#FFFFFF;--fg:#27272A;background:var(--bg)">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');
text { font-family: 'Inter', system-ui, sans-serif; }
svg {
/* Derived from --bg and --fg (overridable via --line, --accent, etc.) */
--_text: var(--fg);
--_text-sec: var(--muted, color-mix(in srgb, var(--fg) 60%, var(--bg)));
--_text-muted: var(--muted, color-mix(in srgb, var(--fg) 40%, var(--bg)));
--_text-faint: color-mix(in srgb, var(--fg) 25%, var(--bg));
--_line: var(--line, color-mix(in srgb, var(--fg) 50%, var(--bg)));
--_arrow: var(--accent, color-mix(in srgb, var(--fg) 85%, var(--bg)));
--_node-fill: var(--surface, color-mix(in srgb, var(--fg) 3%, var(--bg)));
--_node-stroke: var(--border, color-mix(in srgb, var(--fg) 20%, var(--bg)));
--_group-fill: var(--bg);
--_group-hdr: color-mix(in srgb, var(--fg) 5%, var(--bg));
--_inner-stroke: color-mix(in srgb, var(--fg) 12%, var(--bg));
--_key-badge: color-mix(in srgb, var(--fg) 10%, var(--bg));
}
</style>
<defs>
<marker id="arrowhead" markerWidth="8" markerHeight="5" refX="7" refY="2.5" orient="auto">
<polygon points="0 0, 8 2.5, 0 5" fill="var(--_arrow)" stroke="var(--_arrow)" stroke-width="0.75" stroke-linejoin="round" />
</marker>
<marker id="arrowhead-start" markerWidth="8" markerHeight="5" refX="1" refY="2.5" orient="auto-start-reverse">
<polygon points="8 0, 0 2.5, 8 5" fill="var(--_arrow)" stroke="var(--_arrow)" stroke-width="0.75" stroke-linejoin="round" />
</marker>
</defs>
<polyline class="edge" data-from="A" data-to="B" data-style="solid" data-arrow-start="false" data-arrow-end="true" points="129.6655,76.9 129.6655,124.9" fill="none" stroke="var(--_line)" stroke-width="1" marker-end="url(#arrowhead)" />
<polyline class="edge" data-from="B" data-to="C" data-style="solid" data-arrow-start="false" data-arrow-end="true" data-label="Yes" points="110.02883333333335,223.08333333333334 110.02883333333335,278.72 79.5,278.72 79.5,359.02" fill="none" stroke="var(--_line)" stroke-width="1" marker-end="url(#arrowhead)" />
<polyline class="edge" data-from="B" data-to="D" data-style="solid" data-arrow-start="false" data-arrow-end="true" data-label="No" points="149.30216666666666,223.08333333333334 149.30216666666666,278.72 179.83100000000002,278.72 179.831,359.02" fill="none" stroke="var(--_line)" stroke-width="1" marker-end="url(#arrowhead)" />
<g class="edge-label" data-from="B" data-to="C" data-label="Yes">
<rect x="61.00000000000001" y="285.72" width="36.658" height="30.3" rx="2" ry="2" fill="var(--bg)" stroke="var(--_inner-stroke)" stroke-width="1" />
<text x="79.32900000000001" y="300.87" text-anchor="middle" font-size="11" font-weight="400" fill="var(--_text-sec)" dy="3.8499999999999996">Yes</text>
</g>
<g class="edge-label" data-from="B" data-to="D" data-label="No">
<rect x="164.33100000000002" y="285.72" width="30.718000000000004" height="30.3" rx="2" ry="2" fill="var(--bg)" stroke="var(--_inner-stroke)" stroke-width="1" />
<text x="179.69000000000003" y="300.87" text-anchor="middle" font-size="11" font-weight="400" fill="var(--_text-sec)" dy="3.8499999999999996">No</text>
</g>
<g class="node" data-id="A" data-label="Start" data-shape="rectangle">
<rect x="94.6115" y="40" width="70.108" height="36.900000000000006" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
<text x="129.6655" y="58.45" text-anchor="middle" font-size="13" font-weight="500" fill="var(--_text)" dy="4.55">Start</text>
</g>
<g class="node" data-id="B" data-label="Decision" data-shape="diamond">
<polygon points="129.6655,124.9 188.5755,183.81 129.6655,242.72 70.75550000000001,183.81" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
<text x="129.6655" y="183.81" text-anchor="middle" font-size="13" font-weight="500" fill="var(--_text)" dy="4.55">Decision</text>
</g>
<g class="node" data-id="C" data-label="Action" data-shape="rectangle">
<rect x="40" y="359.02" width="79" height="36.900000000000006" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
<text x="79.5" y="377.46999999999997" text-anchor="middle" font-size="13" font-weight="500" fill="var(--_text)" dy="4.55">Action</text>
</g>
<g class="node" data-id="D" data-label="End" data-shape="rectangle">
<rect x="147" y="359.02" width="65.662" height="36.900000000000006" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
<text x="179.83100000000002" y="377.46999999999997" text-anchor="middle" font-size="13" font-weight="500" fill="var(--_text)" dy="4.55">End</text>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.8 KiB