Merge pull request #445 from whyzdev/flowchat_text
added tests and fix cli css style selector lowercase problem
This commit is contained in:
commit
7f0d4fff1b
|
@ -92,6 +92,7 @@ files.forEach(function(file) {
|
||||||
oDOM = oParser.parseFromString(svgContent, "text/xml")
|
oDOM = oParser.parseFromString(svgContent, "text/xml")
|
||||||
|
|
||||||
resolveSVGElement(oDOM.firstChild)
|
resolveSVGElement(oDOM.firstChild)
|
||||||
|
setSVGStyle(oDOM.firstChild, options.css)
|
||||||
|
|
||||||
// traverse the SVG, and replace all foreignObject elements
|
// traverse the SVG, and replace all foreignObject elements
|
||||||
// can be removed when https://github.com/knsv/mermaid/issues/58 is resolved
|
// can be removed when https://github.com/knsv/mermaid/issues/58 is resolved
|
||||||
|
@ -184,6 +185,13 @@ function resolveSVGElement(element) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function setSVGStyle(svg, css) {
|
||||||
|
if (!css || !svg) {return}
|
||||||
|
var styles=svg.getElementsByTagName('style');
|
||||||
|
if (!styles || styles.length==0) { return }
|
||||||
|
styles[0].textContent = css;
|
||||||
|
}
|
||||||
|
|
||||||
function resolveForeignObjects(element) {
|
function resolveForeignObjects(element) {
|
||||||
return;
|
return;
|
||||||
var children
|
var children
|
||||||
|
|
|
@ -27,7 +27,7 @@
|
||||||
"dist-slim-mermaid": "node node_modules/browserify/bin/cmd.js src/mermaid.js -t babelify -s mermaid -o dist/mermaid.slim.js -x d3 && cat dist/mermaid.slim.js | node node_modules/uglifyjs/bin/uglifyjs -mc > dist/mermaid.slim.min.js",
|
"dist-slim-mermaid": "node node_modules/browserify/bin/cmd.js src/mermaid.js -t babelify -s mermaid -o dist/mermaid.slim.js -x d3 && cat dist/mermaid.slim.js | node node_modules/uglifyjs/bin/uglifyjs -mc > dist/mermaid.slim.min.js",
|
||||||
"dist-slim-mermaidAPI": "node node_modules/browserify/bin/cmd.js src/mermaidAPI.js -t babelify -s mermaidAPI -o dist/mermaidAPI.slim.js -x d3 && cat dist/mermaidAPI.slim.js | node node_modules/uglifyjs/bin/uglifyjs -mc > dist/mermaidAPI.slim.min.js",
|
"dist-slim-mermaidAPI": "node node_modules/browserify/bin/cmd.js src/mermaidAPI.js -t babelify -s mermaidAPI -o dist/mermaidAPI.slim.js -x d3 && cat dist/mermaidAPI.slim.js | node node_modules/uglifyjs/bin/uglifyjs -mc > dist/mermaidAPI.slim.min.js",
|
||||||
"dist-mermaid": "node node_modules/browserify/bin/cmd.js src/mermaid.js -t babelify -s mermaid -o dist/mermaid.js && cat dist/mermaid.js | node node_modules/uglifyjs/bin/uglifyjs -mc > dist/mermaid.min.js",
|
"dist-mermaid": "node node_modules/browserify/bin/cmd.js src/mermaid.js -t babelify -s mermaid -o dist/mermaid.js && cat dist/mermaid.js | node node_modules/uglifyjs/bin/uglifyjs -mc > dist/mermaid.min.js",
|
||||||
"dist-mermaid-nomin": "node node_modules/browserify/bin/cmd.js src/mermaid.js -t babelify -s mermaid -o dist/mermaid.js && node bin/mermaid -v -s testgitgraph.mm && testgitgraph.mm.svg",
|
"dist-mermaid-nomin": "node node_modules/browserify/bin/cmd.js src/mermaid.js -t babelify -s mermaid -o dist/mermaid.js",
|
||||||
"dist-mermaidAPI": "node node_modules/browserify/bin/cmd.js src/mermaidAPI.js -t babelify -s mermaidAPI -o dist/mermaidAPI.js && cat dist/mermaidAPI.js | node node_modules/uglifyjs/bin/uglifyjs -mc > dist/mermaidAPI.min.js",
|
"dist-mermaidAPI": "node node_modules/browserify/bin/cmd.js src/mermaidAPI.js -t babelify -s mermaidAPI -o dist/mermaidAPI.js && cat dist/mermaidAPI.js | node node_modules/uglifyjs/bin/uglifyjs -mc > dist/mermaidAPI.min.js",
|
||||||
"dist": "npm run dist-slim-mermaid && npm run dist-slim-mermaidAPI && npm run dist-mermaid && npm run dist-mermaidAPI"
|
"dist": "npm run dist-slim-mermaid && npm run dist-slim-mermaidAPI && npm run dist-mermaid && npm run dist-mermaidAPI"
|
||||||
},
|
},
|
||||||
|
|
|
@ -6,11 +6,29 @@ var path = require('path')
|
||||||
, rimraf = require('rimraf')
|
, rimraf = require('rimraf')
|
||||||
|
|
||||||
var test_dir = 'test/fixtures/samples/'.replace('/',path.sep)
|
var test_dir = 'test/fixtures/samples/'.replace('/',path.sep)
|
||||||
|
var phantomjs = 'node_modules/.bin/phantomjs '.replace('/',path.sep)
|
||||||
|
var load_html_save_screenshot_png_scripts = test_dir+path.sep+'load_html_save_screenshot_png.phantomjs'
|
||||||
|
|
||||||
rimraf.sync(test_dir+'*.actual.*');
|
rimraf.sync(test_dir+'*.actual.*');
|
||||||
|
|
||||||
|
function prepend_output_args(args) {
|
||||||
|
return '--outputDir=' + test_dir + ' --outputSuffix=.actual' + args
|
||||||
|
}
|
||||||
|
|
||||||
function exec_mermaid(args, verify) {
|
function exec_mermaid(args, verify) {
|
||||||
exec('bin/mermaid.js ' + args,
|
var cmd = 'bin/mermaid.js ' + args
|
||||||
|
exec_cmd(cmd, verify)
|
||||||
|
}
|
||||||
|
|
||||||
|
function exec_phantomjs_to_load_html_save_screenshot_png(html, verify) {
|
||||||
|
var cmd = (phantomjs + ' ' + load_html_save_screenshot_png_scripts +
|
||||||
|
' ' + html + ' ' + html + '.actual.png');
|
||||||
|
exec_cmd(cmd, verify)
|
||||||
|
}
|
||||||
|
|
||||||
|
function exec_cmd(cmd, verify) {
|
||||||
|
console.log('cmd: ', cmd)
|
||||||
|
exec(cmd,
|
||||||
{env: {PATH: './node_modules/.bin'+path.delimiter+process.env.PATH}},
|
{env: {PATH: './node_modules/.bin'+path.delimiter+process.env.PATH}},
|
||||||
function(error, stdout, stderr) {
|
function(error, stdout, stderr) {
|
||||||
console.log('error:',error,'\nstdout:\n',stdout,'\nstderr:\n',stderr);
|
console.log('error:',error,'\nstdout:\n',stdout,'\nstderr:\n',stderr);
|
||||||
|
@ -18,36 +36,38 @@ function exec_mermaid(args, verify) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function verify_no_error(t) {
|
||||||
|
return function(error, stdout, stderr) {
|
||||||
|
t.notOk(stderr, 'no error')
|
||||||
|
t.end()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function verify_error(t) {
|
||||||
|
return function(error, stdout, stderr) {
|
||||||
|
t.ok(stderr, 'should get error')
|
||||||
|
t.end()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
test('mermaid cli help', function(t) {
|
test('mermaid cli help', function(t) {
|
||||||
t.plan(1);
|
t.plan(1);
|
||||||
var args = [ '--help' ]
|
var args = [ '--help' ]
|
||||||
exec_mermaid(args.join(' '), function(error, stdout, stderr) {
|
exec_mermaid(args.join(' '), verify_no_error(t));
|
||||||
t.notOk(stderr, 'no error')
|
|
||||||
t.end()
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
test('mermaid cli help', function(t) {
|
test('mermaid cli help', function(t) {
|
||||||
t.plan(1);
|
t.plan(1);
|
||||||
var args = [ '--badopt' ]
|
var args = [ '--badopt' ]
|
||||||
exec_mermaid(args.join(' '), function(error, stdout, stderr) {
|
exec_mermaid(args.join(' '), verify_error(t));
|
||||||
t.ok(stderr, 'should get error')
|
|
||||||
t.end()
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
//todo
|
|
||||||
test.skip('sequence syntax error', function(t) {
|
test.skip('sequence syntax error', function(t) {
|
||||||
t.plan(1);
|
t.plan(1);
|
||||||
var args = [ '--svg',
|
var args = [ '--svg',
|
||||||
'--outputDir=' + test_dir,
|
|
||||||
'--outputSuffix=.actual',
|
|
||||||
test_dir+'sequence_err.mmd'
|
test_dir+'sequence_err.mmd'
|
||||||
]
|
]
|
||||||
exec_mermaid(args.join(' '), function(error, stdout, stderr) {
|
exec_mermaid(prepend_output_args(args.join(' ')), verify_no_error(t));
|
||||||
t.ok(stderr, 'should get error')
|
|
||||||
t.end()
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
['', 'fo', 'tspan', 'old'].forEach(function(textPlacement) {
|
['', 'fo', 'tspan', 'old'].forEach(function(textPlacement) {
|
||||||
|
@ -59,35 +79,63 @@ test.skip('sequence syntax error', function(t) {
|
||||||
textPlacement ? '--sequenceConfig='+test_dir+'sequence_text_'+textPlacement+'.cfg' : '',
|
textPlacement ? '--sequenceConfig='+test_dir+'sequence_text_'+textPlacement+'.cfg' : '',
|
||||||
test_dir+'sequence_text.mmd'
|
test_dir+'sequence_text.mmd'
|
||||||
]
|
]
|
||||||
exec_mermaid(args.join(' '), function(error, stdout, stderr) {
|
exec_mermaid(args.join(' '), verify_no_error(t));
|
||||||
t.notOk(stderr, 'no error')
|
|
||||||
t.end()
|
|
||||||
});
|
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
test('sequence png', function(t) {
|
test('sequence png', function(t) {
|
||||||
t.plan(1);
|
t.plan(1);
|
||||||
var args = [ '--png',
|
var args = [ '--png',
|
||||||
'--outputDir=' + test_dir,
|
|
||||||
'--outputSuffix=.actual',
|
|
||||||
test_dir+'sequence_text.mmd'
|
test_dir+'sequence_text.mmd'
|
||||||
]
|
]
|
||||||
exec_mermaid(args.join(' '), function(error, stdout, stderr) {
|
exec_mermaid(prepend_output_args(args.join(' ')), verify_no_error(t));
|
||||||
t.notOk(stderr, 'no error')
|
|
||||||
t.end()
|
|
||||||
});
|
});
|
||||||
})
|
|
||||||
|
|
||||||
test('flowchart svg text', function(t) {
|
test('flowchart svg text', function(t) {
|
||||||
t.plan(1);
|
t.plan(1);
|
||||||
var args = [ '--svg',
|
var args = [ '--svg',
|
||||||
'--outputDir=' + test_dir,
|
'--css=dist/mermaid.css',
|
||||||
'--outputSuffix=.actual',
|
'--width=500',
|
||||||
test_dir+'flowchart_text.mmd'
|
test_dir+'flowchart_text.mmd'
|
||||||
]
|
]
|
||||||
exec_mermaid(args.join(' '), function(error, stdout, stderr) {
|
exec_mermaid(prepend_output_args(args.join(' ')), verify_no_error(t));
|
||||||
t.notOk(stderr, 'no error')
|
});
|
||||||
t.end()
|
|
||||||
|
['svg', 'png'].forEach(function(format) {
|
||||||
|
test('flowchart '+format+'text2', function(t) {
|
||||||
|
t.plan(1);
|
||||||
|
var args = [ '--'+format,
|
||||||
|
'--css=dist/mermaid.forest.css',
|
||||||
|
'--width=500',
|
||||||
|
test_dir+'flowchart_text2.mmd'
|
||||||
|
]
|
||||||
|
exec_mermaid(prepend_output_args(args.join(' ')), verify_no_error(t));
|
||||||
|
}) });
|
||||||
|
|
||||||
|
|
||||||
|
test('gantt axis formatter svg', function(t) {
|
||||||
|
t.plan(1);
|
||||||
|
var args = [ '--svg',
|
||||||
|
'--css=dist/mermaid.css',
|
||||||
|
'--width=500',
|
||||||
|
'--ganttConfig='+test_dir+'gantt_axis_formatter.cfg',
|
||||||
|
test_dir+'gantt_axis_formatter.mmd'
|
||||||
|
]
|
||||||
|
exec_mermaid(prepend_output_args(args.join(' ')), verify_no_error(t));
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
test('gitgraph sample svg', function(t) {
|
||||||
|
t.plan(1);
|
||||||
|
var args = [ '-s', '-v',
|
||||||
|
'--width=500',
|
||||||
|
test_dir+'gitgraph.mmd'
|
||||||
|
]
|
||||||
|
exec_mermaid(prepend_output_args(args.join(' ')), verify_no_error(t));
|
||||||
|
});
|
||||||
|
|
||||||
|
test('load sample.html in phantomjs and save screenshot png', function(t) {
|
||||||
|
t.plan(1);
|
||||||
|
exec_phantomjs_to_load_html_save_screenshot_png(test_dir+'samples.html',
|
||||||
|
verify_no_error(t));
|
||||||
});
|
});
|
||||||
})
|
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
graph TD;
|
||||||
|
A-->B;
|
||||||
|
A-->C;
|
||||||
|
B-->D;
|
||||||
|
C-->D;
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"titleTopMargin":25,
|
||||||
|
"barHeight":20,
|
||||||
|
"barGap":4,
|
||||||
|
"topPadding":50,
|
||||||
|
"sidePadding":75,
|
||||||
|
"gridLineStartPadding":35,
|
||||||
|
"fontSize":11,
|
||||||
|
"numberSectionStyles":3,
|
||||||
|
"axisFormatter": [["%-m/%-d", "function (d){return d.getDay() == 1;}"]]
|
||||||
|
}
|
|
@ -0,0 +1,8 @@
|
||||||
|
gantt
|
||||||
|
dateFormat YYYY-MM-DD
|
||||||
|
title Adding GANTT diagram functionality to mermaid
|
||||||
|
section A section
|
||||||
|
Completed task :done, des1, 2014-01-06,2014-01-08
|
||||||
|
Active task :active, des2, 2014-01-09, 3d
|
||||||
|
Future task : des3, after des2, 5d
|
||||||
|
Future task2 : des4, after des3, 5d
|
|
@ -0,0 +1,15 @@
|
||||||
|
// usage: ../../../node_modules/.bin/phantomjs <html> <png>
|
||||||
|
var system = require('system');
|
||||||
|
var html = system.args[1];
|
||||||
|
var png = system.args[2];
|
||||||
|
console.log('png:', png)
|
||||||
|
var page = require('webpage').create(),
|
||||||
|
loadInProgress = false,
|
||||||
|
fs = require('fs');
|
||||||
|
|
||||||
|
page.open(html);
|
||||||
|
page.onLoadFinished = function() {
|
||||||
|
loadInProgress = false;
|
||||||
|
page.render(png);
|
||||||
|
phantom.exit();
|
||||||
|
}
|
|
@ -0,0 +1,103 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="stylesheet" href="../../../dist/mermaid.css"/>
|
||||||
|
<script src="../../../dist/mermaid.js"></script>
|
||||||
|
<script>
|
||||||
|
var config = {
|
||||||
|
startOnLoad:true,
|
||||||
|
callback:function(id){
|
||||||
|
console.log(id,' rendered');
|
||||||
|
},
|
||||||
|
flowchart:{
|
||||||
|
useMaxWidth:false,
|
||||||
|
htmlLabels:true
|
||||||
|
},
|
||||||
|
sequenceDiagram: {
|
||||||
|
"textPlacement": "tspan"
|
||||||
|
},
|
||||||
|
gantt: {
|
||||||
|
"titleTopMargin":25,
|
||||||
|
"barHeight":20,
|
||||||
|
"barGap":4,
|
||||||
|
"topPadding":50,
|
||||||
|
"sidePadding":75,
|
||||||
|
"gridLineStartPadding":35,
|
||||||
|
"fontSize":11,
|
||||||
|
"numberSectionStyles":3,
|
||||||
|
"axisFormatter": [["%-m/%-d", function (d){return d.getDay() == 1;}]]
|
||||||
|
},
|
||||||
|
logLevel:5
|
||||||
|
};
|
||||||
|
mermaid.initialize(config);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</head><body>
|
||||||
|
|
||||||
|
<h3>flow chart</h3>
|
||||||
|
|
||||||
|
<div class="mermaid" id="flow_chart_1">
|
||||||
|
graph TD
|
||||||
|
A[label]
|
||||||
|
B[very very very long long long long-long-long text]
|
||||||
|
A--test-->B
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mermaid" id="flow_chart_2">
|
||||||
|
graph TD;
|
||||||
|
A-->B;
|
||||||
|
A-->C;
|
||||||
|
B-->D;
|
||||||
|
C-->D;
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>sequence diagram</h3>
|
||||||
|
|
||||||
|
<div class="mermaid" id="sequence_diagram_1">
|
||||||
|
sequenceDiagram
|
||||||
|
participant A as actor
|
||||||
|
participant B as very very very long long long long-long-long text
|
||||||
|
A->>B: hi
|
||||||
|
B-->A:
|
||||||
|
B->>A: hello
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>gantt chart</h3>
|
||||||
|
|
||||||
|
<div class="mermaid" id="gantt_axis_formatter">
|
||||||
|
gantt
|
||||||
|
dateFormat YYYY-MM-DD
|
||||||
|
title gantt chart
|
||||||
|
section A section
|
||||||
|
Completed task :done, des1, 2014-01-06,2014-01-08
|
||||||
|
Active task :active, des2, 2014-01-09, 3d
|
||||||
|
Future task : des3, after des2, 5d
|
||||||
|
Future task2 : des4, after des3, 5d
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>git graph</h3>
|
||||||
|
|
||||||
|
<div class="mermaid" id="git_graph_1">
|
||||||
|
gitGraph BT:
|
||||||
|
options
|
||||||
|
{
|
||||||
|
"nodeSpacing": 150
|
||||||
|
}
|
||||||
|
end
|
||||||
|
commit
|
||||||
|
branch newbranch
|
||||||
|
checkout newbranch
|
||||||
|
commit
|
||||||
|
commit
|
||||||
|
checkout master
|
||||||
|
commit
|
||||||
|
commit
|
||||||
|
merge newbranch
|
||||||
|
reset newbranch^^
|
||||||
|
commit
|
||||||
|
commit
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
Loading…
Reference in New Issue