graph TD
A[Christmas] -->|Get money| B(Go shopping)
@@ -39,7 +54,7 @@ Alice->John: Maybe
end
par this happens in parallel
Alice -->> Bob: Parallel message 1
-and
+and
Alice -->> John: Parallel message 2
end
diff --git a/package.json b/package.json
index d573dcd7e..4a8c59cd4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "mermaid",
- "version": "8.0.0-beta.3",
+ "version": "8.0.0-beta.5",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"main": "dist/mermaid.core.js",
"keywords": [
diff --git a/src/diagrams/class/classRenderer.js b/src/diagrams/class/classRenderer.js
index bdfe8f3d5..5169fce4b 100644
--- a/src/diagrams/class/classRenderer.js
+++ b/src/diagrams/class/classRenderer.js
@@ -307,7 +307,7 @@ export const draw = function (text, id) {
logger.info('Rendering diagram ' + text)
/// / Fetch the default direction, use TD if none was found
- const diagram = d3.select('#' + id)
+ const diagram = d3.select(`[id="${id}"]`)
insertMarkers(diagram)
// Layout graph, Create a new directed graph
diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js
index ecce367d2..5c1f157b8 100644
--- a/src/diagrams/flowchart/flowDb.js
+++ b/src/diagrams/flowchart/flowDb.js
@@ -166,7 +166,7 @@ const setClickFun = function (id, functionName) {
}
if (typeof vertices[id] !== 'undefined') {
funs.push(function (element) {
- const elem = d3.select(element).select('#' + id)
+ const elem = d3.select(element).select(`[id="${id}"]`)
if (elem !== null) {
elem.on('click', function () {
window[functionName](id)
@@ -182,7 +182,7 @@ const setLink = function (id, linkStr) {
}
if (typeof vertices[id] !== 'undefined') {
funs.push(function (element) {
- const elem = d3.select(element).select('#' + id)
+ const elem = d3.select(element).select(`[id="${id}"]`)
if (elem !== null) {
elem.on('click', function () {
window.open(linkStr, 'newTab')
diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
index 1cd3e8e88..cd589d28f 100644
--- a/src/diagrams/flowchart/flowRenderer.js
+++ b/src/diagrams/flowchart/flowRenderer.js
@@ -391,7 +391,7 @@ export const draw = function (text, id) {
}
// Set up an SVG group so that we can translate the final graph.
- const svg = d3.select('#' + id)
+ const svg = d3.select(`[id="${id}"]`)
// Run the renderer. This is what draws the final graph.
const element = d3.select('#' + id + ' g')
diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js
index 62537325e..7d24df2a4 100644
--- a/src/diagrams/gantt/ganttRenderer.js
+++ b/src/diagrams/gantt/ganttRenderer.js
@@ -47,7 +47,7 @@ export const draw = function (text, id) {
elem.setAttribute('height', '100%')
// Set viewBox
elem.setAttribute('viewBox', '0 0 ' + w + ' ' + h)
- const svg = d3.select('#' + id)
+ const svg = d3.select(`[id="${id}"]`)
// Set timescale
const timeScale = d3.scaleTime()
diff --git a/src/diagrams/git/gitGraphRenderer.js b/src/diagrams/git/gitGraphRenderer.js
index e77647a61..3ef56478d 100644
--- a/src/diagrams/git/gitGraphRenderer.js
+++ b/src/diagrams/git/gitGraphRenderer.js
@@ -256,7 +256,7 @@ export const draw = function (txt, id, ver) {
config.nodeLabel.width = '100%'
config.nodeLabel.y = -1 * 2 * config.nodeRadius
}
- const svg = d3.select('#' + id)
+ const svg = d3.select(`[id="${id}"]`)
svgCreateDefs(svg)
branchNum = 1
_.each(branches, function (v) {
diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js
index e4dd37ca6..fcf41d28e 100644
--- a/src/diagrams/sequence/sequenceRenderer.js
+++ b/src/diagrams/sequence/sequenceRenderer.js
@@ -315,7 +315,7 @@ export const draw = function (text, id) {
parser.parse(text + '\n')
bounds.init()
- const diagram = d3.select('#' + id)
+ const diagram = d3.select(`[id="${id}"]`)
let startx
let stopx
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index 37368e3a9..ec0c26fda 100644
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -412,7 +412,7 @@ const render = function (id, txt, cb, container) {
}`
svg.insertBefore(style2, firstChild)
- d3.select('#' + id).selectAll('foreignobject > *').attr('xmlns', 'http://www.w3.org/1999/xhtml')
+ d3.select(`[id="${id}"]`).selectAll('foreignobject > *').attr('xmlns', 'http://www.w3.org/1999/xhtml')
let url = ''
if (config.arrowMarkerAbsolute) {
diff --git a/todo.md b/todo.md
index 8996b3819..2ed550c5c 100644
--- a/todo.md
+++ b/todo.md
@@ -2,3 +2,29 @@
- git graph requires a blank line at the end. why?
- Create a desktop client
- Flowchart `interpolate` is useless because there is no rendering code using it
+
+
+I have the feeling that the flowchart DSL is not very readable or expressive despite it is short.
+And it is too limited for complicated requirements such as: https://github.com/knsv/mermaid/issues/592
+
+Maybe the following is better:
+
+```json
+{
+ "nodes": [
+ {
+ "name": "A"
+ }
+ {
+ "name": "B"
+ }
+ ],
+ "edges": [
+ {
+ "from": "A",
+ "to": "B",
+ "style": "dashed"
+ }
+ ]
+}
+```