-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;
+
+%%{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
flowchart TD
@@ -94,44 +90,7 @@ flowchart TD
C <-...-> E4
C ======> E5
- 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
-
- flowchart TB
- subgraph bar[Bar]
- F
- end
- style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
-
- %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
+
flowchart LR
subgraph A
a --> b
@@ -154,7 +113,7 @@ A --> B
// 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 },
diff --git a/src/defaultConfig.js b/src/defaultConfig.js
index 9fb279bb2..ad18c6875 100644
--- a/src/defaultConfig.js
+++ b/src/defaultConfig.js
@@ -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,
diff --git a/src/diagrams/user-journey/journeyRenderer.js b/src/diagrams/user-journey/journeyRenderer.js
index 854f2ce37..328039347 100644
--- a/src/diagrams/user-journey/journeyRenderer.js
+++ b/src/diagrams/user-journey/journeyRenderer.js
@@ -2,11 +2,12 @@ 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 = {
+const conf2 = {
leftMargin: 150,
diagramMarginX: 50,
diagramMarginY: 20,
@@ -16,11 +17,12 @@ const conf = {
width: 150,
// Height of task boxes
height: 50,
- taskFontSize: 14,
- taskFontFamily: '"Open-Sans", "sans-serif"',
// Margin around loop boxes
boxMargin: 10,
boxTextMargin: 5,
+
+ taskFontSize: 14,
+ taskFontFamily: '"Open-Sans", "sans-serif"',
noteMargin: 10,
// Space between messages
messageMargin: 35,
@@ -53,6 +55,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 +82,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 +170,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 +226,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;