#5237 Setting layout algorithm and handrawn or not via configuration
This commit is contained in:
parent
39bffcb3a0
commit
323737f3a6
24
cSpell.json
24
cSpell.json
|
@ -60,6 +60,7 @@
|
||||||
"grav",
|
"grav",
|
||||||
"greywolf",
|
"greywolf",
|
||||||
"gzipped",
|
"gzipped",
|
||||||
|
"handdrawn",
|
||||||
"huynh",
|
"huynh",
|
||||||
"huynhicode",
|
"huynhicode",
|
||||||
"iife",
|
"iife",
|
||||||
|
@ -170,7 +171,11 @@
|
||||||
"zune"
|
"zune"
|
||||||
],
|
],
|
||||||
"patterns": [
|
"patterns": [
|
||||||
{ "name": "Markdown links", "pattern": "\\((.*)\\)", "description": "" },
|
{
|
||||||
|
"name": "Markdown links",
|
||||||
|
"pattern": "\\((.*)\\)",
|
||||||
|
"description": ""
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "Markdown code blocks",
|
"name": "Markdown code blocks",
|
||||||
"pattern": "/^(\\s*`{3,}).*[\\s\\S]*?^\\1/gmx",
|
"pattern": "/^(\\s*`{3,}).*[\\s\\S]*?^\\1/gmx",
|
||||||
|
@ -181,14 +186,25 @@
|
||||||
"pattern": "\\`([^\\`\\r\\n]+?)\\`",
|
"pattern": "\\`([^\\`\\r\\n]+?)\\`",
|
||||||
"description": "https://stackoverflow.com/questions/41274241/how-to-capture-inline-markdown-code-but-not-a-markdown-code-fence-with-regex"
|
"description": "https://stackoverflow.com/questions/41274241/how-to-capture-inline-markdown-code-but-not-a-markdown-code-fence-with-regex"
|
||||||
},
|
},
|
||||||
{ "name": "Link contents", "pattern": "\\<a(.*)\\>", "description": "" },
|
{
|
||||||
{ "name": "Snippet references", "pattern": "-- snippet:(.*)", "description": "" },
|
"name": "Link contents",
|
||||||
|
"pattern": "\\<a(.*)\\>",
|
||||||
|
"description": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Snippet references",
|
||||||
|
"pattern": "-- snippet:(.*)",
|
||||||
|
"description": ""
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "Snippet references 2",
|
"name": "Snippet references 2",
|
||||||
"pattern": "\\<\\[sample:(.*)",
|
"pattern": "\\<\\[sample:(.*)",
|
||||||
"description": "another kind of snippet reference"
|
"description": "another kind of snippet reference"
|
||||||
},
|
},
|
||||||
{ "name": "Multi-line code blocks", "pattern": "/^\\s*```[\\s\\S]*?^\\s*```/gm" },
|
{
|
||||||
|
"name": "Multi-line code blocks",
|
||||||
|
"pattern": "/^\\s*```[\\s\\S]*?^\\s*```/gm"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "HTML Tags",
|
"name": "HTML Tags",
|
||||||
"pattern": "<[^>]*>",
|
"pattern": "<[^>]*>",
|
||||||
|
|
|
@ -75,10 +75,15 @@
|
||||||
<pre id="diagram" class="mermaid">
|
<pre id="diagram" class="mermaid">
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
Chimp --> A
|
Chimp --> A
|
||||||
|
Chimp --> B
|
||||||
|
Chimp --> C
|
||||||
|
|
||||||
</pre
|
</pre
|
||||||
>
|
>
|
||||||
<pre id="diagram" class="mermaid">
|
<pre id="diagram" class="mermaid">
|
||||||
|
---
|
||||||
|
handdrawn: false
|
||||||
|
---
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
state First {
|
state First {
|
||||||
second
|
second
|
||||||
|
@ -95,10 +100,17 @@ stateDiagram-v2
|
||||||
</pre
|
</pre
|
||||||
>
|
>
|
||||||
<pre id="diagram" class="mermaid2">
|
<pre id="diagram" class="mermaid2">
|
||||||
flowchart TB
|
stateDiagram-v2
|
||||||
subgraph First
|
state fork_state <<fork>>
|
||||||
Second
|
[*] --> fork_state
|
||||||
end
|
fork_state --> State2
|
||||||
|
fork_state --> State3
|
||||||
|
|
||||||
|
state join_state <<join>>
|
||||||
|
State2 --> join_state
|
||||||
|
State3 --> join_state
|
||||||
|
join_state --> State4
|
||||||
|
State4 --> [*]
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram" class="mermaid2">
|
<pre id="diagram" class="mermaid2">
|
||||||
flowchart TB
|
flowchart TB
|
||||||
|
@ -474,8 +486,9 @@ mindmap
|
||||||
// useMaxWidth: false,
|
// useMaxWidth: false,
|
||||||
// });
|
// });
|
||||||
mermaid.initialize({
|
mermaid.initialize({
|
||||||
|
handdrawn: true,
|
||||||
|
layout: 'elk',
|
||||||
flowchart: { titleTopMargin: 10 },
|
flowchart: { titleTopMargin: 10 },
|
||||||
/* fontFamily: 'Kalam', */
|
|
||||||
fontFamily: 'Caveat',
|
fontFamily: 'Caveat',
|
||||||
sequence: {
|
sequence: {
|
||||||
actorFontFamily: 'courier',
|
actorFontFamily: 'courier',
|
||||||
|
|
|
@ -64,6 +64,7 @@ export interface MermaidConfig {
|
||||||
theme?: 'default' | 'forest' | 'dark' | 'neutral' | 'null';
|
theme?: 'default' | 'forest' | 'dark' | 'neutral' | 'null';
|
||||||
themeVariables?: any;
|
themeVariables?: any;
|
||||||
themeCSS?: string;
|
themeCSS?: string;
|
||||||
|
handdrawn?: boolean; // Different from theme as it could be combined with any theme in the future
|
||||||
/**
|
/**
|
||||||
* The maximum allowed size of the users text diagram
|
* The maximum allowed size of the users text diagram
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -846,7 +846,9 @@ export const getData = () => {
|
||||||
extract(getRootDocV2());
|
extract(getRootDocV2());
|
||||||
const diagramStates = getStates();
|
const diagramStates = getStates();
|
||||||
|
|
||||||
const useRough = false;
|
console.log('Config - DAGA', getConfig());
|
||||||
|
|
||||||
|
const useRough = getConfig().handdrawn;
|
||||||
dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough);
|
dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough);
|
||||||
|
|
||||||
return { nodes, edges, other: {} };
|
return { nodes, edges, other: {} };
|
||||||
|
|
|
@ -88,7 +88,8 @@ export const draw = async function (text: string, id: string, _version: string,
|
||||||
|
|
||||||
data4Layout.type = diag.type;
|
data4Layout.type = diag.type;
|
||||||
// data4Layout.layoutAlgorithm = 'dagre-wrapper';
|
// data4Layout.layoutAlgorithm = 'dagre-wrapper';
|
||||||
data4Layout.layoutAlgorithm = 'elk';
|
// data4Layout.layoutAlgorithm = 'elk';
|
||||||
|
data4Layout.layoutAlgorithm = getConfig().layout;
|
||||||
data4Layout.direction = DIR;
|
data4Layout.direction = DIR;
|
||||||
data4Layout.nodeSpacing = conf.nodeSpacing || 50;
|
data4Layout.nodeSpacing = conf.nodeSpacing || 50;
|
||||||
data4Layout.rankSpacing = conf.rankSpacing || 50;
|
data4Layout.rankSpacing = conf.rankSpacing || 50;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
export const render = async (data4Layout, svg, element) => {
|
export const render = async (data4Layout, svg, element) => {
|
||||||
switch (data4Layout.layoutAlgorithm) {
|
switch (data4Layout.layoutAlgorithm) {
|
||||||
case 'dagre-wrapper': {
|
case 'dagre': {
|
||||||
const layoutRenderer = await import('./layout-algorithms/dagre/index.js');
|
const layoutRenderer = await import('./layout-algorithms/dagre/index.js');
|
||||||
return layoutRenderer.render(data4Layout, svg, element);
|
return layoutRenderer.render(data4Layout, svg, element);
|
||||||
}
|
}
|
||||||
|
|
|
@ -70,6 +70,16 @@ properties:
|
||||||
tsType: any
|
tsType: any
|
||||||
themeCSS:
|
themeCSS:
|
||||||
type: string
|
type: string
|
||||||
|
handdrawn:
|
||||||
|
description: |
|
||||||
|
Defines whether or not to use the handdrawn effect in the diagram.
|
||||||
|
type: boolean
|
||||||
|
default: false
|
||||||
|
layout:
|
||||||
|
description: |
|
||||||
|
Defines which layout algorithm to use for rendering the diagram.
|
||||||
|
type: string
|
||||||
|
default: 'dagre'
|
||||||
maxTextSize:
|
maxTextSize:
|
||||||
description: The maximum allowed size of the users text diagram
|
description: The maximum allowed size of the users text diagram
|
||||||
type: number
|
type: number
|
||||||
|
|
Loading…
Reference in New Issue