mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
updated rough js hachureGap and shapes
This commit is contained in:
parent
f4d4c784e4
commit
336c3127ed
@ -62,22 +62,18 @@
|
||||
|
||||
<body>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
flowchart
|
||||
A
|
||||
B@{ shape: multiRect, label: "title aduwab whgdawhbd wajhdbawj" }@
|
||||
F@{ shape: multiRect, label: "title " }@
|
||||
G@{ shape: multiRect, label: "title \n duawd \n duawd \n duawd \n duawd" }@
|
||||
C
|
||||
D
|
||||
E
|
||||
C -->B
|
||||
B --> D
|
||||
B --> E
|
||||
F --> A
|
||||
A --> F
|
||||
---
|
||||
config:
|
||||
flowchart:
|
||||
htmlLabels: true
|
||||
---
|
||||
flowchart
|
||||
classDef customClazz fill:#bbf,stroke:#f66,stroke-width:4px,color:#000,stroke-dasharray: 5 5
|
||||
A1 --> B1@{ shape: taggedWaveEdgedRectangle, label: "test augfuyfavf yafuabffaev ydvaubfuac" }@ --> C1
|
||||
A2 --> B2@{ shape: taggedRect, label: "test augfuyfavf yafuabffaev ydvaubfuac" }@ --> C2
|
||||
B1:::customClazz
|
||||
</pre
|
||||
>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
import layouts from './mermaid-layout-elk.esm.mjs';
|
||||
@ -91,7 +87,7 @@ A
|
||||
mermaid.initialize({
|
||||
// theme: 'base',
|
||||
// handdrawnSeed: 12,
|
||||
look: 'classic',
|
||||
look: 'handDrawn',
|
||||
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
|
||||
// 'elk.nodePlacement.strategy': 'SIMPLE',
|
||||
// 'elk.nodePlacement.strategy': 'LAYERED',
|
||||
@ -100,7 +96,7 @@ A
|
||||
// layout: 'elk',
|
||||
// layout: 'fixed',
|
||||
// htmlLabels: false,
|
||||
flowchart: { titleTopMargin: 100, padding: 50 },
|
||||
flowchart: { titleTopMargin: 10, padding: 5 },
|
||||
// fontFamily: 'Caveat',
|
||||
fontFamily: 'Kalam',
|
||||
// fontFamily: 'courier',
|
||||
|
@ -97,9 +97,10 @@ export const userNodeOverrides = (node: Node, options: any) => {
|
||||
fill: stylesMap.get('fill') || mainBkg,
|
||||
fillStyle: 'hachure', // solid fill
|
||||
fillWeight: 4,
|
||||
hachureGap: 5.2,
|
||||
stroke: stylesMap.get('stroke') || nodeBorder,
|
||||
seed: handDrawnSeed,
|
||||
strokeWidth: 1.3,
|
||||
strokeWidth: stylesMap.get('stroke-width')?.replace('px', '') || 1.3,
|
||||
fillLineDash: [0, 0],
|
||||
},
|
||||
options
|
||||
|
@ -54,7 +54,7 @@ export const multiRect = async (parent: SVGAElement, node: Node) => {
|
||||
const outerPath = createPathFromPoints(outerPathPoints);
|
||||
const outerNode = rc.path(outerPath, options);
|
||||
const innerPath = createPathFromPoints(innerPathPoints);
|
||||
const innerNode = rc.path(innerPath, options);
|
||||
const innerNode = rc.path(innerPath, { ...options, fill: 'none' });
|
||||
|
||||
const multiRect = shapeSvg.insert(() => innerNode, ':first-child');
|
||||
multiRect.insert(() => outerNode, ':first-child');
|
||||
|
@ -45,7 +45,7 @@ export const taggedRect = async (parent: SVGAElement, node: Node) => {
|
||||
const rectNode = rc.path(rectPath, options);
|
||||
|
||||
const tagPath = createPathFromPoints(tagPoints);
|
||||
const tagNode = rc.path(tagPath, options);
|
||||
const tagNode = rc.path(tagPath, { ...options, fillStyle: 'solid' });
|
||||
|
||||
const taggedRect = shapeSvg.insert(() => tagNode, ':first-child');
|
||||
taggedRect.insert(() => rectNode, ':first-child');
|
||||
|
@ -67,7 +67,10 @@ export const taggedWaveEdgedRectangle = async (parent: SVGAElement, node: Node)
|
||||
const waveEdgeRectNode = rc.path(waveEdgeRectPath, options);
|
||||
|
||||
const taggedWaveEdgeRectPath = createPathFromPoints(tagPoints);
|
||||
const taggedWaveEdgeRectNode = rc.path(taggedWaveEdgeRectPath, options);
|
||||
const taggedWaveEdgeRectNode = rc.path(taggedWaveEdgeRectPath, {
|
||||
...options,
|
||||
fillStyle: 'solid',
|
||||
});
|
||||
|
||||
const waveEdgeRect = shapeSvg.insert(() => taggedWaveEdgeRectNode, ':first-child');
|
||||
waveEdgeRect.insert(() => waveEdgeRectNode, ':first-child');
|
||||
|
Loading…
x
Reference in New Issue
Block a user