diff --git a/dist/xssi.html b/dist/xssi.html
new file mode 100644
index 0000000000..df853a0a45
--- /dev/null
+++ b/dist/xssi.html
@@ -0,0 +1,122 @@
+
+
+
+ Mermaid Quick Test Page
+
+ gantt
+ title Exclusive end dates If bold then xss (Manual date should end on 3d)
+ dateFormat YYYY-MM-DD
+ axisFormat %d
+ section Section1
+ 2 Days: 1, 2019-01-01,2d
+ Manual Date: 2, 2019-01-01,2019-01-03
+
+
+ graph TD
+ A["If bold then xss Christmas"] -->|Get If bold then xss money| B(Go If bold then xss shopping)
+ B --> C{Let me thinksssss
+
+graph TB
+ subgraph "If bold then xss "
+ a1-->a2
+ end
+
+
+graph TD
+A[Christmas] -->|Get money| B(Go shopping)
+B --> C{Let me think}
+C -->|One| D[Laptop]
+C -->|Two| E[iPhone]
+C -->|Three| F[Car]
+click A "index.html#link-clicked" "link test"
+click B testClick "click test"
+classDef someclass fill:#f96;
+class A someclass;
+
+
+
+sequenceDiagram
+participant "Alice"
+participant Bob
+participant John as JohnIf bold then xss John?
+Bob--x Alice: I am good thanks!
+Bob-x John: I am good thanks!
+Note right of John: Bob thinks a long
+
+
+classDiagram
+Class01 <|-- AveryLongClass : CoIf bold then xss ol
+Class03 "0" *-- "0..n" Class04
+Class05 "1" o-- "many" Class06
+Class07 .. Class08
+Class09 "many" --> "1" C2 : Where am i?
+Class09 "0" --* "1..n" C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+Class08 <--> C2: Cool label
+
+
+
+
+
+
+
diff --git a/docs/mermaidAPI.md b/docs/mermaidAPI.md
index 4f8595286f..e4b26a751d 100644
--- a/docs/mermaidAPI.md
+++ b/docs/mermaidAPI.md
@@ -1,103 +1,228 @@
-# mermaidAPI
+
-> **Warning** This file is generated automatically from the comments of [mermaidAPI.js](https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js) file. Please read that file **instead** for up-to-date information.
+## mermaidAPI
-This is the api to be used when handling the integration with the web page instead of using the default integration (mermaid.js).
-
-The core of this api is the **render** function that given a graph definitionas text renders the graph/diagram and returns a svg element for the graph. It is is then up to the user of the API to make use of the svg, either insert it somewhere in the page or something completely different.
+This is the api to be used when handling the integration with the web page instead of using the default integration
+(mermaid.js).
+The core of this api is the **render** function that given a graph definitionas text renders the graph/diagram and
+returns a svg element for the graph. It is is then up to the user of the API to make use of the svg, either insert it
+somewhere in the page or something completely different.
## Configuration
These are the default options which can be overridden with the initialization call as in the example below:
-```javascript
-mermaid.initialize({
- flowchart:{
- htmlLabels: false
- }
-});
-```
+ mermaid.initialize({
+ flowchart:{
+ htmlLabels: false
+ }
+ });
+
+## theme
+
+theme , the CSS style sheet
+**theme** - Choose one of the built-in themes: default, forest, dark or neutral. To disable any pre-defined mermaid theme, use "null".
+**themeCSS** - Use your own CSS. This overrides **theme**.
+
+ "theme": "forest",
+ "themeCSS": ".node rect { fill: red; }"
## logLevel
-Decides the amount of logging to be used.
+This option decides the amount of logging to be used.
+
+- debug: 1
+- info: 2
+- warn: 3
+- error: 4
+- fatal: (**default**) 5
+
+## securityLevel
-- debug: 1
-- info: 2
-- warn: 3
-- error: 4
-- fatal: 5
+Sets the level of trust to be used on the parsed diagrams.
-**cloneCssStyles** - This options controls whether or not the css rules should be copied into the generated svg startOnLoad - This options controls whether or mermaid starts when the page loads
-**arrowMarkerAbsolute** - This options controls whether or arrow markers in html code will be absolute paths or an anchor, #. This matters if you are using base tag settings.
+- **true**: (**default**) tags in text are encoded, click functionality is disabeled
+- **false**: tags in text are allowed, click functionality is enabled
+## startOnLoad
+
+This options controls whether or mermaid starts when the page loads
+**Default value true**.
+
+## arrowMarkerAbsolute
+
+This options controls whether or arrow markers in html code will be absolute paths or
+an anchor, #. This matters if you are using base tag settings.
+**Default value false**.
## flowchart
The object containing configurations specific for flowcharts
-**htmlLabels** - Flag for setting whether or not a html tag should be used for rendering labels on the edges
-**useMaxWidth** - Flag for setting whether or not a all available width should be used for the diagram.
+### htmlLabels
+
+Flag for setting whether or not a html tag should be used for rendering labels
+on the edges.
+**Default value true**.
+
+### curve
+
+**Default value linear**.
## sequence
The object containing configurations specific for sequence diagrams
-**diagramMarginX** - margin to the right and left of the sequence diagram
-**diagramMarginY** - margin to the over and under the sequence diagram
-**actorMargin** - Margin between actors
-**width** - Width of actor boxes
-**height** - Height of actor boxes
-**boxMargin** - Margin around loop boxes
-**boxTextMargin** - margin around the text in loop/alt/opt boxes
-**noteMargin** - margin around notes
-**messageMargin** - Space between messages
-**mirrorActors** - mirror actors under diagram
-**bottomMarginAdj** - Depending on css styling this might need adjustment. Prolongs the edge of the diagram downwards
-**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
+### 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**.
+
+### mirrorActors
+
+mirror actors under diagram.
+**Default value true**.
+
+### 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**.
+
+### showSequenceNumbers
+
+This will show the node numbers
+**Default value false**.
## gantt
-The object containing configurations specific for gantt diagrams
+The object containing configurations specific for gantt diagrams\*
+
+### titleTopMargin
-**titleTopMargin** - margin top for the text over the gantt diagram
-**barHeight** - the height of the bars in the graph
-**barGap** - the margin between the different activities in the gantt diagram
-**topPadding** - margin between title and gantt diagram and between axis and gantt diagram.
-**leftPadding** - the space allocated for the section name to the left of the activities.
-**gridLineStartPadding** - Vertical starting position of the grid lines
-**fontSize** - font size ...
-**fontFamily** - font family ...
-**numberSectionStyles** - the number of alternating section styles
-**axisFormatter** - formatting of the axis, this might need adjustment to match your locale and preferences
+Margin top for the text over the gantt diagram
+**Default value 25**.
+### barHeight
-## parse
+The height of the bars in the graph
+**Default value 20**.
-Function that parses a mermaid diagram definition. If parsing fails the parseError callback is called and an error is thrown.
+### barGap
+The margin between the different activities in the gantt diagram.
+**Default value 4**.
-## version
+### topPadding
-Function returning version information
+Margin between title and gantt diagram and between axis and gantt diagram.
+**Default value 50**.
+### leftPadding
+
+The space allocated for the section name to the left of the activities.
+**Default value 75**.
+
+### gridLineStartPadding
+
+Vertical starting position of the grid lines.
+**Default value 35**.
+
+### fontSize
+
+Font size ...
+**Default value 11**.
+
+### fontFamily
+
+font family ...
+**Default value '"Open-Sans", "sans-serif"'**.
+
+### numberSectionStyles
+
+The number of alternating section styles.
+**Default value 4**.
+
+### axisFormat
+
+Datetime format of the axis, this might need adjustment to match your locale and preferences
+**Default value '%Y-%m-%d'**.
## render
-Function that renders a svg with a graph from a chart definition. Usage example below:
+Function that renders an svg with a graph from a chart definition. Usage example below.
-```javascript
+```js
mermaidAPI.initialize({
- startOnLoad: true
-})
-$(function() {
- var graphDefinition = 'graph TB\na-->b'
- var cb = function(svgGraph) {
- console.log(svgGraph)
- }
- mermaidAPI.render('id1',graphDefinition,cb)
-})
+ startOnLoad:true
+ });
+ $(function(){
+ const graphDefinition = 'graph TB\na-->b';
+ const cb = function(svgGraph){
+ console.log(svgGraph);
+ };
+ mermaidAPI.render('id1',graphDefinition,cb);
+ });
```
+
+### Parameters
+
+- `id` the id of the element to be rendered
+- `txt` the graph definition
+- `cb` callback which is called after rendering is finished with the svg code as inparam.
+- `container` selector to element in which a div with the graph temporarily will be inserted. In one is
+ provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is
+ completed.
diff --git a/e2e/helpers/util.js b/e2e/helpers/util.js
index bd5f7b6243..e60e15aa06 100644
--- a/e2e/helpers/util.js
+++ b/e2e/helpers/util.js
@@ -1,19 +1,23 @@
/* eslint-env jest */
import { Base64 } from 'js-base64'
-export const mermaidUrl = (graphStr, options) => {
+export const mermaidUrl = (graphStr, options, api) => {
const obj = {
code: graphStr,
mermaid: options
}
const objStr = JSON.stringify(obj)
- // console.log(Base64)
- return 'http://localhost:9000/e2e.html?graph=' + Base64.encodeURI(objStr)
+ let url = 'http://localhost:9000/e2e.html?graph=' + Base64.encodeURI(objStr)
+ if (api) {
+ url = 'http://localhost:9000/xss.html?graph=' + graphStr
+ }
+
+ return url
}
-export const imgSnapshotTest = async (page, graphStr, options) => {
+export const imgSnapshotTest = async (page, graphStr, options, api) => {
return new Promise(async resolve => {
- const url = mermaidUrl(graphStr, options)
+ const url = mermaidUrl(graphStr, options, api)
await page.goto(url)
diff --git a/e2e/platform/viewer.js b/e2e/platform/viewer.js
index a99bad818c..afdbc23c7d 100644
--- a/e2e/platform/viewer.js
+++ b/e2e/platform/viewer.js
@@ -1,4 +1,5 @@
import { Base64 } from 'js-base64'
+import mermaid from '../../dist/mermaid.core'
/**
* ##contentLoaded
@@ -22,6 +23,29 @@ const contentLoaded = function () {
global.mermaid.init()
}
}
+const contentLoadedApi = function () {
+ let pos = document.location.href.indexOf('?graph=')
+ if (pos > 0) {
+ pos = pos + 7
+ const graphBase64 = document.location.href.substr(pos)
+ const graphObj = JSON.parse(Base64.decode(graphBase64))
+ // const graph = 'hello'
+ console.log(graphObj)
+ const div = document.createElement('div')
+ div.id = 'block'
+ div.className = 'mermaid'
+ // div.innerHTML = graphObj.code
+ document.getElementsByTagName('body')[0].appendChild(div)
+ global.mermaid.initialize(graphObj.mermaid)
+ console.log('apa')
+
+ mermaid.render('newid', graphObj.code, (svgCode, bindFunctions) => {
+ div.innerHTML = svgCode
+
+ bindFunctions(div)
+ }, div)
+ }
+}
if (typeof document !== 'undefined') {
/*!
@@ -30,7 +54,12 @@ if (typeof document !== 'undefined') {
window.addEventListener(
'load',
function () {
- contentLoaded()
+ if (this.location.href.match('xss.html')) {
+ this.console.log('Using api')
+ contentLoadedApi()
+ } else {
+ contentLoaded()
+ }
},
false
)
diff --git a/e2e/platform/xss.html b/e2e/platform/xss.html
new file mode 100644
index 0000000000..9abc43852a
--- /dev/null
+++ b/e2e/platform/xss.html
@@ -0,0 +1,44 @@
+
+
+
+ 
+