marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-26 18:59:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1916 from mermaid-js/1903_journey_config

Browse Source 
1903 journey config
This commit is contained in:
Knut Sveidqvist
2021-02-27 13:56:39 +01:00
committed by GitHub
parent 0646b43144 184351c932
commit 4524f8413f
3 changed files with 35 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
cypress/platform/knsv.html
View File

@@ -25,21 +25,17 @@
<body>
<h1>info below</h1>
<div class="flex">
<div class="mermaid2" style="width: 50%; height: 400px;">
graph TD
A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C
subgraph T ["Test"]
A
B
C
end
classDef Test fill:#F84E68,stroke:#333,color:white;
class A,T Test
classDef TestSub fill:green;
class T TestSub
linkStyle 0,1 color:orange, stroke: orange;
<div class="mermaid" style="width: 50%; height: 400px;">
%%{init: { "logLevel": 1, "journey": {"useMaxWidth": false }} }%%
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
</div>
<div class="mermaid2" style="width: 50%; height: 400px;">
flowchart TD
@@ -134,7 +130,7 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
flowchart: { curve: 'cardinal', htmlLabels: true },
flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: true },
htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: true },

20
src/defaultConfig.js
View File

@@ -638,7 +638,7 @@ const config = {
***Notes:**
***Default value 10**..
*/
diagramMarginY: 10,
diagramMarginY: 20,
/**
*| Parameter | Description |Type | Required | Values|
@@ -648,7 +648,7 @@ const config = {
***Notes:**
***Default value 50**.
*/
actorMargin: 50,
leftMargin: 150,
/**
*| Parameter | Description |Type | Required | Values|
@@ -668,7 +668,7 @@ const config = {
***Notes:**
***Default value 65**.
*/
height: 65,
height: 50,
/**
*| 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
***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: {
arrowMarkerAbsolute: false,

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

@@ -2,46 +2,11 @@ import { select } from 'd3';
import { parser } from './parser/journey';
import journeyDb from './journeyDb';
import svgDraw from './svgDraw';
import { getConfig } from '../../config';
import { configureSvgSize } from '../../utils';
parser.yy = journeyDb;
const conf = {
leftMargin: 150,
diagramMarginX: 50,
diagramMarginY: 20,
// Margin between tasks
taskMargin: 50,
// Width of task boxes
width: 150,
// Height of task boxes
height: 50,
taskFontSize: 14,
taskFontFamily: '"Open-Sans", "sans-serif"',
// Margin around loop boxes
boxMargin: 10,
boxTextMargin: 5,
noteMargin: 10,
// Space between messages
messageMargin: 35,
// Multiline message alignment
messageAlign: 'center',
// Depending on css styling this might need adjustment
// Projects the edge of the diagram downwards
bottomMarginAdj: 1,
// 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']
};
export const setConf = function(cnf) {
const keys = Object.keys(cnf);
@@ -53,6 +18,7 @@ export const setConf = function(cnf) {
const actors = {};
function drawActorLegend(diagram) {
const conf = getConfig().journey;
// Draw the actors
let yPos = 60;
Object.keys(actors).forEach(person => {
@@ -79,9 +45,10 @@ function drawActorLegend(diagram) {
yPos += 20;
});
}
const LEFT_MARGIN = conf.leftMargin;
const conf = getConfig().journey;
const LEFT_MARGIN = getConfig().journey.leftMargin;
export const draw = function(text, id) {
const conf = getConfig().journey;
parser.yy.clear();
parser.parse(text + '\n');
@@ -166,6 +133,7 @@ export const bounds = {
}
},
updateBounds: function(startx, starty, stopx, stopy) {
const conf = getConfig().journey;
const _self = this;
let cnt = 0;
function updateFn(type) {
@@ -221,6 +189,7 @@ const fills = conf.sectionFills;
const textColours = conf.sectionColours;
export const drawTasks = function(diagram, tasks, verticalPos) {
const conf = getConfig().journey;
let lastSection = '';
const sectionVHeight = conf.height * 2 + conf.diagramMarginY;
const taskPos = verticalPos + sectionVHeight;