marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-02 15:16:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

#5237 Fix for text alignment for handdrawn text using svg labels

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-08-12 09:35:01 +02:00
parent 39fdaef0a4
commit 7f9d4cd079
2 changed files with 44 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
cypress/platform/knsv2.html
View File

@@ -81,20 +81,52 @@
</head> </head>
<body> <body>
<pre id="diagram" class="mermaid"> <div class="flex">
<pre id="diagram" class="mermaid">
--- ---
config: config:
look: handDrawn look: handDrawn
flowchart:
htmlLabels: false
--- ---
flowchart flowchart
a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a A[I am a long text, where do I go??? handdrawn - false]
a_a --> c --> d_d --> c_c </pre
classDef apa fill:#f9f,stroke:#333,stroke-width:4px; >
class a_a apa; <pre id="diagram" class="mermaid">
click a_a "http://www.aftonbladet.se" "bookmark" ---
click c_c callback "new tooltip" config:
</pre look: handdrawn
> flowchart:
htmlLabels: true
---
flowchart
A[I am a long text, where do I go??? handdrawn - true]
</pre
>
</div>
<div class="flex">
<pre id="diagram" class="mermaid">
---
config:
flowchart:
htmlLabels: false
---
flowchart
A[I am a long text, where do I go??? classic - false]
</pre
>
<pre id="diagram" class="mermaid">
---
config:
flowchart:
htmlLabels: true
---
flowchart
A[I am a long text, where do I go??? classic - true]
</pre
>
</div>
<pre id="diagram2" class="mermaid2"> <pre id="diagram2" class="mermaid2">
flowchart LR flowchart LR
id1(Start)-->id2(Stop) id1(Start)-->id2(Stop)

2
packages/mermaid/src/diagrams/flowchart/styles.ts
View File

@@ -59,7 +59,7 @@ const getStyles = (options: FlowChartStyleOptions) =>
stroke: ${options.nodeBorder}; stroke: ${options.nodeBorder};
stroke-width: 1px; stroke-width: 1px;
} }
.node .label text { .rough-node .label text , .node .label text {
text-anchor: middle; text-anchor: middle;
} }
// .flowchart-label .text-outer-tspan { // .flowchart-label .text-outer-tspan {