marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-18 11:44:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: temp fix for shape with comma

Browse Source
This commit is contained in:
Ashish Jain
2024-07-26 10:02:12 +02:00
parent 4d8e519298
commit f176b71c7c
3 changed files with 3178 additions and 9177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
cypress/platform/knsv2.html
View File

@@ -1,51 +1,40 @@
<html> <html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
rel="stylesheet"
/>
<style> <head>
body { <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
/* background: rgb(221, 208, 208); */ <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
/* background: #333; */ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
font-family: 'Arial'; <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css" rel="stylesheet" />
/* font-size: 18px !important; */ <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet" />
} <link rel="preconnect" href="https://fonts.googleapis.com" />
h1 { <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
color: grey; <link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap" rel="stylesheet" />
} <link
.mermaid2 { href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
display: none; rel="stylesheet" />
} <link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
.mermaid svg { rel="stylesheet" />
/* font-size: 18px !important; */
/* background-color: #efefef; <style>
body {
/* background: rgb(221, 208, 208); */
/* background: #333; */
font-family: 'Arial';
/* font-size: 18px !important; */
}
h1 {
color: grey;
}
.mermaid2 {
display: none;
}
.mermaid svg {
/* font-size: 18px !important; */
/* background-color: #efefef;
background-image: radial-gradient(#fff 51%, transparent 91%), background-image: radial-gradient(#fff 51%, transparent 91%),
radial-gradient(#fff 51%, transparent 91%); radial-gradient(#fff 51%, transparent 91%);
background-size: 20px 20px; background-size: 20px 20px;
@@ -53,11 +42,12 @@
0 0, 0 0,
10px 10px; 10px 10px;
background-repeat: repeat; */ background-repeat: repeat; */
} }
</style> </style>
</head> </head>
<body>
<pre id="diagram4" class="mermaid"> <body>
<pre id="diagram4" class="mermaid">
flowchart flowchart
A --> D@{ shape: roundedRect A --> D@{ shape: roundedRect
}@ }@
@@ -69,9 +59,8 @@ flowchart
shape: hexagon, shape: hexagon,
icon: car icon: car
}@ --> B }@ --> B
</pre </pre>
> <pre id="diagram4" class="mermaid2">
<pre id="diagram4" class="mermaid">
flowchart flowchart
A{"This is a label"}@{ A{"This is a label"}@{
@@ -90,51 +79,51 @@ flowchart
icon: car icon: car
}@ --> B }@ --> B
A(This is a label) A(This is a label)
</pre </pre>
>
<script type="module"> <script type="module">
import mermaid from './mermaid.esm.mjs'; import mermaid from './mermaid.esm.mjs';
import { layouts } from './mermaid-layout-elk.esm.mjs'; import { layouts } from './mermaid-layout-elk.esm.mjs';
mermaid.registerLayoutLoaders(layouts); mermaid.registerLayoutLoaders(layouts);
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
console.error('Mermaid error: ', err); console.error('Mermaid error: ', err);
}; };
window.callback = function () { window.callback = function () {
alert('A callback was triggered'); alert('A callback was triggered');
}; };
mermaid.initialize({ mermaid.initialize({
// theme: 'base', // theme: 'base',
// handdrawnSeed: 12, // handdrawnSeed: 12,
look: 'classic', look: 'classic',
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX', // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
'elk.nodePlacement.strategy': 'SIMPLE', 'elk.nodePlacement.strategy': 'SIMPLE',
// 'elk.nodePlacement.strategy': 'LAYERED', // 'elk.nodePlacement.strategy': 'LAYERED',
// 'elk.mergeEdges': true, // 'elk.mergeEdges': true,
// layout: 'dagre', // layout: 'dagre',
layout: 'elk', layout: 'elk',
// layout: 'fixed', // layout: 'fixed',
// htmlLabels: false, // htmlLabels: false,
flowchart: { titleTopMargin: 10, padding: 8 }, flowchart: { titleTopMargin: 10, padding: 8 },
// fontFamily: 'Caveat', // fontFamily: 'Caveat',
fontFamily: 'Kalam', fontFamily: 'Kalam',
// fontFamily: 'courier', // fontFamily: 'courier',
sequence: { sequence: {
actorFontFamily: 'courier', actorFontFamily: 'courier',
noteFontFamily: 'courier', noteFontFamily: 'courier',
messageFontFamily: 'courier', messageFontFamily: 'courier',
}, },
fontSize: 12, fontSize: 12,
logLevel: 0, logLevel: 0,
securityLevel: 'loose', securityLevel: 'loose',
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
console.error('In parse error:'); console.error('In parse error:');
console.error(err); console.error(err);
}; };
</script> </script>
</body> </body>
</html>
</html>

4
packages/mermaid/src/diagrams/flowchart/flowDb.ts
View File

@@ -140,6 +140,10 @@ export const addVertex = function (
const doc = yaml.load(yamlData, { schema: yaml.JSON_SCHEMA }); const doc = yaml.load(yamlData, { schema: yaml.JSON_SCHEMA });
console.log('yamlData doc', doc); console.log('yamlData doc', doc);
if (doc?.shape) { if (doc?.shape) {
//check if shape has a trailing `,` and remove it
if (doc.shape.endsWith(',')) {
doc.shape = doc.shape.slice(0, -1);
}
vertex.type = doc?.shape; vertex.type = doc?.shape;
} }
if (doc?.label) { if (doc?.label) {

12162
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff