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

Fix CSS cannot select number ID issue

Browse Source
This commit is contained in:
Tyler Long
2018-03-17 09:10:10 +08:00
parent b777c8de15
commit 015b976c28
10 changed files with 51 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
dist/index.html vendored
View File

@@ -7,6 +7,21 @@
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
</head> </head>
<body> <body>
<div class="mermaid">
graph LR
456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
81dc9bdb52d04dc20036dbd8313ed055[1234 CCC fa:fa-check]
456ac9b0d15a8b7f1e71073221059886 -->|Node| f7f580e11d00a75814d2ded41fe8e8fe
f7f580e11d00a75814d2ded41fe8e8fe -->|Node| 81dc9bdb52d04dc20036dbd8313ed055
click 456ac9b0d15a8b7f1e71073221059886 "/admin/user/view?id=1051" "AAA
6000"
click f7f580e11d00a75814d2ded41fe8e8fe "/admin/user/view?id=1141" "BBB
600"
click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
3000"
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
</div>
<div class="mermaid"> <div class="mermaid">
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
@@ -39,7 +54,7 @@ Alice->John: Maybe
end end
par this happens in parallel par this happens in parallel
Alice -->> Bob: Parallel message 1 Alice -->> Bob: Parallel message 1
and and
Alice -->> John: Parallel message 2 Alice -->> John: Parallel message 2
end end
</div> </div>

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "mermaid", "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.", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"main": "dist/mermaid.core.js", "main": "dist/mermaid.core.js",
"keywords": [ "keywords": [

2
src/diagrams/class/classRenderer.js
View File

@@ -307,7 +307,7 @@ export const draw = function (text, id) {
logger.info('Rendering diagram ' + text) logger.info('Rendering diagram ' + text)
/// / Fetch the default direction, use TD if none was found /// / Fetch the default direction, use TD if none was found
const diagram = d3.select('#' + id) const diagram = d3.select(`[id="${id}"]`)
insertMarkers(diagram) insertMarkers(diagram)
// Layout graph, Create a new directed graph // Layout graph, Create a new directed graph

4
src/diagrams/flowchart/flowDb.js
View File

@@ -166,7 +166,7 @@ const setClickFun = function (id, functionName) {
} }
if (typeof vertices[id] !== 'undefined') { if (typeof vertices[id] !== 'undefined') {
funs.push(function (element) { funs.push(function (element) {
const elem = d3.select(element).select('#' + id) const elem = d3.select(element).select(`[id="${id}"]`)
if (elem !== null) { if (elem !== null) {
elem.on('click', function () { elem.on('click', function () {
window[functionName](id) window[functionName](id)
@@ -182,7 +182,7 @@ const setLink = function (id, linkStr) {
} }
if (typeof vertices[id] !== 'undefined') { if (typeof vertices[id] !== 'undefined') {
funs.push(function (element) { funs.push(function (element) {
const elem = d3.select(element).select('#' + id) const elem = d3.select(element).select(`[id="${id}"]`)
if (elem !== null) { if (elem !== null) {
elem.on('click', function () { elem.on('click', function () {
window.open(linkStr, 'newTab') window.open(linkStr, 'newTab')

2
src/diagrams/flowchart/flowRenderer.js
View File

@@ -391,7 +391,7 @@ export const draw = function (text, id) {
} }
// Set up an SVG group so that we can translate the final graph. // 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. // Run the renderer. This is what draws the final graph.
const element = d3.select('#' + id + ' g') const element = d3.select('#' + id + ' g')

2
src/diagrams/gantt/ganttRenderer.js
View File

@@ -47,7 +47,7 @@ export const draw = function (text, id) {
elem.setAttribute('height', '100%') elem.setAttribute('height', '100%')
// Set viewBox // Set viewBox
elem.setAttribute('viewBox', '0 0 ' + w + ' ' + h) elem.setAttribute('viewBox', '0 0 ' + w + ' ' + h)
const svg = d3.select('#' + id) const svg = d3.select(`[id="${id}"]`)
// Set timescale // Set timescale
const timeScale = d3.scaleTime() const timeScale = d3.scaleTime()

2
src/diagrams/git/gitGraphRenderer.js
View File

@@ -256,7 +256,7 @@ export const draw = function (txt, id, ver) {
config.nodeLabel.width = '100%' config.nodeLabel.width = '100%'
config.nodeLabel.y = -1 * 2 * config.nodeRadius config.nodeLabel.y = -1 * 2 * config.nodeRadius
} }
const svg = d3.select('#' + id) const svg = d3.select(`[id="${id}"]`)
svgCreateDefs(svg) svgCreateDefs(svg)
branchNum = 1 branchNum = 1
_.each(branches, function (v) { _.each(branches, function (v) {

2
src/diagrams/sequence/sequenceRenderer.js
View File

@@ -315,7 +315,7 @@ export const draw = function (text, id) {
parser.parse(text + '\n') parser.parse(text + '\n')
bounds.init() bounds.init()
const diagram = d3.select('#' + id) const diagram = d3.select(`[id="${id}"]`)
let startx let startx
let stopx let stopx

2
src/mermaidAPI.js
View File

@@ -412,7 +412,7 @@ const render = function (id, txt, cb, container) {
}` }`
svg.insertBefore(style2, firstChild) 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 = '' let url = ''
if (config.arrowMarkerAbsolute) { if (config.arrowMarkerAbsolute) {

26
todo.md
View File

@@ -2,3 +2,29 @@
- git graph requires a blank line at the end. why? - git graph requires a blank line at the end. why?
- Create a desktop client - Create a desktop client
- Flowchart `interpolate` is useless because there is no rendering code using it - 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"
}
]
}
```