diff --git a/cypress/platform/user-journey.html b/cypress/platform/user-journey.html
index 2fcd48046..8c4a7b63b 100644
--- a/cypress/platform/user-journey.html
+++ b/cypress/platform/user-journey.html
@@ -33,7 +33,7 @@
diff --git a/docs/mermaidAPI.md b/docs/mermaidAPI.md
index 2469edd12..6dd749e27 100644
--- a/docs/mermaidAPI.md
+++ b/docs/mermaidAPI.md
@@ -263,84 +263,14 @@ The number of alternating section styles.
Datetime format of the axis. This might need adjustment to match your locale and preferences
**Default value '%Y-%m-%d'**.
-## journey
-
-The object containing configurations specific for sequence diagrams
-
-### diagramMarginX
-
-margin to the right and left of the sequence diagram.
-**Default value 50**.
-
-### diagramMarginY
-
-margin to the over and under the sequence diagram.
-**Default value 10**.
-
-### actorMargin
-
-Margin between actors.
-**Default value 50**.
-
-### width
-
-Width of actor boxes
-**Default value 150**.
-
-### height
-
-Height of actor boxes
-**Default value 65**.
-
-### boxMargin
-
-Margin around loop boxes
-**Default value 10**.
-
-### boxTextMargin
-
-margin around the text in loop/alt/opt boxes
-**Default value 5**.
-
-### noteMargin
-
-margin around notes.
-**Default value 10**.
-
-### messageMargin
-
-Space between messages.
-**Default value 35**.
-
-### messageAlign
-
-Multiline message alignment. Possible values are:
-
-- left
-- center **default**
-- right
-
-### bottomMarginAdj
-
-Depending on css styling this might need adjustment.
-Prolongs the edge of the diagram downwards.
-**Default value 1**.
-
-### useMaxWidth
-
-when this flag is set the height and width is set to 100% and is then scaling with the
-available space if not the absolute space required is used.
-**Default value true**.
-
-### rightAngles
-
-This will display arrows that start and begin at the same node as right angles, rather than a curve
-**Default value false**.
-
## er
The object containing configurations specific for entity relationship diagrams
+### diagramPadding
+
+The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels
+
### layoutDirection
Directional bias for layout of entities. Can be either 'TB', 'BT', 'LR', or 'RL',
@@ -348,15 +278,15 @@ where T = top, B = bottom, L = left, and R = right.
### minEntityWidth
-The mimimum width of an entity box
+The mimimum width of an entity box, expressed in pixels
### minEntityHeight
-The minimum height of an entity box
+The minimum height of an entity box, expressed in pixels
### entityPadding
-The minimum internal padding between the text in an entity box and the enclosing box borders
+The minimum internal padding between the text in an entity box and the enclosing box borders, expressed in pixels
### stroke
@@ -366,12 +296,6 @@ Stroke color of box edges and lines
Fill color of entity boxes
-### fillOpacity
-
-Opacity of entity boxes - if you want to see how the crows feet
-retain their elegant joins to the boxes regardless of the angle of incidence
-then override this to something less than 100%
-
### fontSize
Font size
@@ -431,6 +355,7 @@ mermaidAPI.initialize({
boxTextMargin:5,
noteMargin:10,
messageMargin:35,
+ messageAlign:'center',
mirrorActors:true,
bottomMarginAdj:1,
useMaxWidth:true,
diff --git a/docs/user-journey.md b/docs/user-journey.md
new file mode 100644
index 000000000..2446c6db0
--- /dev/null
+++ b/docs/user-journey.md
@@ -0,0 +1,23 @@
+# User Journey Diagram
+
+> User journeys describe at a high level of detail exactly what steps different users take to complete a specific task within a system, application or website. This technique shows the current (as-is) user workflow, and reveals areas of improvement for the to-be workflow. (Wikipedia)
+
+Mermaid can render user journey diagrams:
+
+```markdown
+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
+```
+
+Each user journey is split into sections, these describe the part of the task
+the user is trying to complete.
+
+Tasks syntax is `Task name: : `
+
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index 9dd4c77ab..fabc9e096 100644
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -45,6 +45,9 @@ import pieDb from './diagrams/pie/pieDb';
import erDb from './diagrams/er/erDb';
import erParser from './diagrams/er/parser/erDiagram';
import erRenderer from './diagrams/er/erRenderer';
+import journeyParser from './diagrams/user-journey/parser/journey';
+import journeyDb from './diagrams/user-journey/journeyDb';
+import journeyRenderer from './diagrams/user-journey/journeyRenderer';
const themes = {};
for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
@@ -337,6 +340,92 @@ const config = {
*/
axisFormat: '%Y-%m-%d'
},
+ /**
+ * The object containing configurations specific for sequence diagrams
+ */
+ journey: {
+ /**
+ * margin to the right and left of the sequence diagram.
+ * **Default value 50**.
+ */
+ diagramMarginX: 50,
+
+ /**
+ * margin to the over and under the sequence diagram.
+ * **Default value 10**.
+ */
+ diagramMarginY: 10,
+
+ /**
+ * Margin between actors.
+ * **Default value 50**.
+ */
+ actorMargin: 50,
+
+ /**
+ * Width of actor boxes
+ * **Default value 150**.
+ */
+ width: 150,
+
+ /**
+ * Height of actor boxes
+ * **Default value 65**.
+ */
+ height: 65,
+
+ /**
+ * Margin around loop boxes
+ * **Default value 10**.
+ */
+ boxMargin: 10,
+
+ /**
+ * margin around the text in loop/alt/opt boxes
+ * **Default value 5**.
+ */
+ boxTextMargin: 5,
+
+ /**
+ * margin around notes.
+ * **Default value 10**.
+ */
+ noteMargin: 10,
+
+ /**
+ * Space between messages.
+ * **Default value 35**.
+ */
+ messageMargin: 35,
+
+ /**
+ * Multiline message alignment. Possible values are:
+ * * left
+ * * center **default**
+ * * right
+ */
+ messageAlign: 'center',
+
+ /**
+ * Depending on css styling this might need adjustment.
+ * Prolongs the edge of the diagram downwards.
+ * **Default value 1**.
+ */
+ bottomMarginAdj: 1,
+
+ /**
+ * when this flag is set the height and width is set to 100% and is then scaling with the
+ * available space if not the absolute space required is used.
+ * **Default value true**.
+ */
+ useMaxWidth: true,
+
+ /**
+ * This will display arrows that start and begin at the same node as right angles, rather than a curve
+ * **Default value false**.
+ */
+ rightAngles: false
+ },
class: {},
git: {},
state: {
@@ -465,6 +554,11 @@ function parse(text) {
parser = erParser;
parser.parser.yy = erDb;
break;
+ case 'journey':
+ logger.debug('Journey');
+ parser = journeyParser;
+ parser.parser.yy = journeyDb;
+ break;
}
parser.parser.yy.parseError = (str, hash) => {
@@ -696,6 +790,10 @@ const render = function(id, _txt, cb, container) {
erRenderer.setConf(config.er);
erRenderer.draw(txt, id, pkg.version);
break;
+ case 'journey':
+ journeyRenderer.setConf(config.journey);
+ journeyRenderer.draw(txt, id, pkg.version);
+ break;
}
d3.select(`[id="${id}"]`)
diff --git a/src/utils.js b/src/utils.js
index 823191ffc..b1073952f 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -59,6 +59,10 @@ export const detectType = function(text) {
return 'er';
}
+ if (text.match(/^\s*journey/)) {
+ return 'journey';
+ }
+
return 'flowchart';
};