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

2
packages/mermaid/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "mermaid", "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.", "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"type": "module", "type": "module",
"module": "./dist/mermaid.core.mjs", "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 { .cluster-label text {
fill: ${options.titleColor}; fill: ${options.titleColor};
} }
.cluster-label span { .cluster-label span,p {
color: ${options.titleColor}; color: ${options.titleColor};
} }
.label text,span { .label text,span,p {
fill: ${options.nodeTextColor || options.textColor}; fill: ${options.nodeTextColor || options.textColor};
color: ${options.nodeTextColor || options.textColor}; color: ${options.nodeTextColor || options.textColor};
} }
@ -92,7 +92,7 @@ const getStyles = (options: FlowChartStyleOptions) =>
fill: ${options.titleColor}; fill: ${options.titleColor};
} }
.cluster span { .cluster span,p {
color: ${options.titleColor}; color: ${options.titleColor};
} }
/* .cluster div { /* .cluster div {