mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

#1903 Use central configuration tools

This commit is contained in:
Knut Sveidqvist 2021-02-23 20:56:01 +01:00
parent ba3e0c4c35
commit 693de2996a
3 changed files with 40 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
cypress/platform/knsv.html
View File

@ -25,21 +25,17 @@
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="flex"> <div class="flex">
<div class="mermaid2" style="width: 50%; height: 400px;"> <div class="mermaid" style="width: 50%; height: 400px;">
graph TD %%{init: { "logLevel": 1, "journey": {"useMaxWidth": false }} }%%
A[Christmas] ==> D journey
A[Christmas] -->|Get money| B(Go shopping) title My working day
A[Christmas] ==> C section Go to work
subgraph T ["Test"] Make tea: 5: Me
A Go upstairs: 3: Me
B Do work: 1: Me, Cat
C section Go home
end Go downstairs: 5: Me
classDef Test fill:#F84E68,stroke:#333,color:white; Sit down: 5: Me
class A,T Test
classDef TestSub fill:green;
class T TestSub
linkStyle 0,1 color:orange, stroke: orange;
</div> </div>
<div class="mermaid2" style="width: 50%; height: 400px;"> <div class="mermaid2" style="width: 50%; height: 400px;">
flowchart TD flowchart TD
@ -94,44 +90,7 @@ flowchart TD
C <-...-> E4 C <-...-> E4
C ======> E5 C ======> E5
</div> </div>
<div class="mermaid" style="width: 50%; height: 21%;"> <div class="mermaid2" style="width: 50%; height: 21%;">
flowchart TB
A
B
subgraph foo[Foo SubGraph]
C
D
end
subgraph bar[Bar SubGraph]
E
F
end
G
A-->B
B-->C
C-->D
B-->D
D-->E
E-->A
E-->F
F-->D
F-->G
B-->G
G-->D
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
</div>
<div class="mermaid" style="width: 50%; height: 20%;">
flowchart TB
subgraph bar[Bar]
F
end
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
</div>
<div class="mermaid" style="width: 50%; height: 20%;">
%%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
flowchart LR flowchart LR
subgraph A subgraph A
a --> b a --> b
@ -154,7 +113,7 @@ A --> B
// arrowMarkerAbsolute: true, // arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}', // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0, logLevel: 0,
flowchart: { curve: 'cardinal', htmlLabels: true }, flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: true },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: true }, sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: true },

20
src/defaultConfig.js
View File

@ -638,7 +638,7 @@ const config = {
***Notes:** ***Notes:**
***Default value 10**.. ***Default value 10**..
*/ */
diagramMarginY: 10, diagramMarginY: 20,
/** /**
*| Parameter | Description |Type | Required | Values| *| Parameter | Description |Type | Required | Values|
@ -648,7 +648,7 @@ const config = {
***Notes:** ***Notes:**
***Default value 50**. ***Default value 50**.
*/ */
actorMargin: 50, leftMargin: 150,
/** /**
*| Parameter | Description |Type | Required | Values| *| Parameter | Description |Type | Required | Values|
@ -668,7 +668,7 @@ const config = {
***Notes:** ***Notes:**
***Default value 65**. ***Default value 65**.
*/ */
height: 65, height: 50,
/** /**
*| Parameter | Description |Type | Required | Values| *| Parameter | Description |Type | Required | Values|
@ -750,7 +750,19 @@ const config = {
***Notes:**This will display arrows that start and begin at the same node as right angles, rather than a curves ***Notes:**This will display arrows that start and begin at the same node as right angles, rather than a curves
***Default value false**. ***Default value false**.
*/ */
rightAngles: false rightAngles: false,
taskFontSize: 14,
taskFontFamily: '"Open-Sans", "sans-serif"',
taskMargin: 50,
// width of activation box
activationWidth: 10,
// text placement as: tspan | fo | old only text as before
textPlacement: 'fo',
actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'],
sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'],
sectionColours: ['#fff']
}, },
class: { class: {
arrowMarkerAbsolute: false, arrowMarkerAbsolute: false,

16
src/diagrams/user-journey/journeyRenderer.js
View File

@ -2,11 +2,12 @@ import { select } from 'd3';
import { parser } from './parser/journey'; import { parser } from './parser/journey';
import journeyDb from './journeyDb'; import journeyDb from './journeyDb';
import svgDraw from './svgDraw'; import svgDraw from './svgDraw';
import { getConfig } from '../../config';
import { configureSvgSize } from '../../utils'; import { configureSvgSize } from '../../utils';
parser.yy = journeyDb; parser.yy = journeyDb;
const conf = { const conf2 = {
leftMargin: 150, leftMargin: 150,
diagramMarginX: 50, diagramMarginX: 50,
diagramMarginY: 20, diagramMarginY: 20,
@ -16,11 +17,12 @@ const conf = {
width: 150, width: 150,
// Height of task boxes // Height of task boxes
height: 50, height: 50,
taskFontSize: 14,
taskFontFamily: '"Open-Sans", "sans-serif"',
// Margin around loop boxes // Margin around loop boxes
boxMargin: 10, boxMargin: 10,
boxTextMargin: 5, boxTextMargin: 5,
taskFontSize: 14,
taskFontFamily: '"Open-Sans", "sans-serif"',
noteMargin: 10, noteMargin: 10,
// Space between messages // Space between messages
messageMargin: 35, messageMargin: 35,
@ -53,6 +55,7 @@ export const setConf = function(cnf) {
const actors = {}; const actors = {};
function drawActorLegend(diagram) { function drawActorLegend(diagram) {
const conf = getConfig().journey;
// Draw the actors // Draw the actors
let yPos = 60; let yPos = 60;
Object.keys(actors).forEach(person => { Object.keys(actors).forEach(person => {
@ -79,9 +82,10 @@ function drawActorLegend(diagram) {
yPos += 20; yPos += 20;
}); });
} }
const conf = getConfig().journey;
const LEFT_MARGIN = conf.leftMargin; const LEFT_MARGIN = getConfig().journey.leftMargin;
export const draw = function(text, id) { export const draw = function(text, id) {
const conf = getConfig().journey;
parser.yy.clear(); parser.yy.clear();
parser.parse(text + '\n'); parser.parse(text + '\n');
@ -166,6 +170,7 @@ export const bounds = {
} }
}, },
updateBounds: function(startx, starty, stopx, stopy) { updateBounds: function(startx, starty, stopx, stopy) {
const conf = getConfig().journey;
const _self = this; const _self = this;
let cnt = 0; let cnt = 0;
function updateFn(type) { function updateFn(type) {
@ -221,6 +226,7 @@ const fills = conf.sectionFills;
const textColours = conf.sectionColours; const textColours = conf.sectionColours;
export const drawTasks = function(diagram, tasks, verticalPos) { export const drawTasks = function(diagram, tasks, verticalPos) {
const conf = getConfig().journey;
let lastSection = ''; let lastSection = '';
const sectionVHeight = conf.height * 2 + conf.diagramMarginY; const sectionVHeight = conf.height * 2 + conf.diagramMarginY;
const taskPos = verticalPos + sectionVHeight; const taskPos = verticalPos + sectionVHeight;