GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Some styling fixes for markdown strings

Browse Source
This commit is contained in:
Knut Sveidqvist 2023-04-04 08:29:15 +02:00
parent 5d536b9973
commit 2b9872d656
3 changed files with 25 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
cypress/platform/knsv2.html
View File

@ -29,9 +29,9 @@
}
.mermaid svg {
/* font-size: 18px !important; */
background-color: #eee;
background-image: radial-gradient(#fff 1%, transparent 11%),
radial-gradient(#fff 1%, transparent 11%);
background-color: #efefef;
background-image: radial-gradient(#fff 51%, transparent 91%),
radial-gradient(#fff 51%, transparent 91%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
background-repeat: repeat;
@ -58,20 +58,22 @@
</head>
<body>
<pre id="diagram" class="mermaid">
%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart-elk LR
b("`The dog in **the** hog(2)... a a a a *very long text* about it
Word!
Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `")
</pre
flowchart LR
A[A text that needs to be wrapped wraps to another line]
B[A text that needs to be<br/>wrapped wraps to another line]
C["`A text that needs to be wrapped to another line`"]</pre>
<pre id="diagram" class="mermaid">
flowchart LR
C["`A text
that needs
to be wrapped
in another
way`"]
</pre
>
<pre id="diagram" class="mermaid2">
flowchart-elk LR
b("The dog in the hog... a very<br/>long text about it<br/>Word!")
</pre>
<pre id="diagram" class="mermaid2">
flowchart-elk LR
b("The dog in the hog... a very<br/>long text about it<br/>Word!")
</pre>
>
<pre id="diagram" class="mermaid2">
@ -89,11 +91,11 @@ mindmap
</pre>
<pre id="diagram" class="mermaid">
mindmap
id1["`**Root** with
a second line
Unicode works too: 🤓`"]
id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]
id3[Regular labels still works]
id1("`**Root**`"]
id2["`A formatted text... with **bold** and *italics*`"]
id3[Regular labels works as usual]
id4["`Emojis and unicode works too: 🤓
शान्तिः سلام 和平 `"]
</pre>
<pre id="diagram" class="mermaid2">
@ -293,7 +295,7 @@ mindmap
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'forest',
// theme: 'forest',
startOnLoad: true,
logLevel: 0,
flowchart: {

2
packages/mermaid/package.json
View File

@ -1,6 +1,6 @@
{
"name": "mermaid",
"version": "10.0.2",
"version": "10.1.0-rc.1",
"description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"type": "module",
"module": "./dist/mermaid.core.mjs",

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

@ -23,11 +23,11 @@ const getStyles = (options: FlowChartStyleOptions) =>
.cluster-label text {
fill: ${options.titleColor};
}
.cluster-label span {
.cluster-label span,p {
color: ${options.titleColor};
}
.label text,span {
.label text,span,p {
fill: ${options.nodeTextColor || options.textColor};
color: ${options.nodeTextColor || options.textColor};
}
@ -92,7 +92,7 @@ const getStyles = (options: FlowChartStyleOptions) =>
fill: ${options.titleColor};
}
.cluster span {
.cluster span,p {
color: ${options.titleColor};
}
/* .cluster div {