GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Fix for issue #209, missing links when baste tag is used

Browse Source 
Fix for issue #195, text wrap in sequence diagrams drops last word
Documentation
This commit is contained in:
knsv 2015-09-26 12:09:47 +02:00
parent bae1e80ac0
commit fb94aaaa6f
7 changed files with 239 additions and 511 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
src/d3.js vendored
View File

@ -28,15 +28,15 @@ module.exports = d3;
/* jshint ignore:start */
/*
D3 Text Wrap
By Vijith Assar
http://www.vijithassar.com
http://www.github.com/vijithassar
@vijithassar
D3 Text Wrap
By Vijith Assar
http://www.vijithassar.com
http://www.github.com/vijithassar
@vijithassar
Detailed instructions at http://www.github.com/vijithassar/d3textwrap
Detailed instructions at http://www.github.com/vijithassar/d3textwrap
*/
*/
(function() {
@ -86,7 +86,7 @@ Detailed instructions at http://www.github.com/vijithassar/d3textwrap
// if it's not a rect, exit
if(element_type !== 'rect') {
return false;
// if it's a rect, proceed to extracting the position attributes
// if it's a rect, proceed to extracting the position attributes
} else {
var bounds_extracted = {};
bounds_extracted.x = d3.select(bounding_rect).attr('x') || 0;
@ -122,30 +122,30 @@ Detailed instructions at http://www.github.com/vijithassar/d3textwrap
(typeof bounds.y !== 'undefined') &&
(typeof bounds.width !== 'undefined') &&
(typeof bounds.height !== 'undefined')
// if that's the case, then the bounds are fine
// if that's the case, then the bounds are fine
) {
// return the lightly modified bounds
return bounds;
// if it's a numerically indexed array, assume it's a
// d3-selected rect and try to extract the positions
// if it's a numerically indexed array, assume it's a
// d3-selected rect and try to extract the positions
} else if (
// first try to make sure it's an array using Array.isArray
(
(typeof Array.isArray == 'function') &&
(Array.isArray(bounds))
) ||
// but since Array.isArray isn't always supported, fall
// back to casting to the object to string when it's not
(Object.prototype.toString.call(bounds) === '[object Array]')
// first try to make sure it's an array using Array.isArray
(
(typeof Array.isArray == 'function') &&
(Array.isArray(bounds))
) ||
// but since Array.isArray isn't always supported, fall
// back to casting to the object to string when it's not
(Object.prototype.toString.call(bounds) === '[object Array]')
) {
// once you're sure it's an array, extract the boundaries
// from the rect
var extracted_bounds = extract_bounds(bounds);
return extracted_bounds;
} else {
// but if the bounds are neither an object nor a numerical
// array, then the bounds argument is invalid and you'll
// need to fix it
// but if the bounds are neither an object nor a numerical
// array, then the bounds argument is invalid and you'll
// need to fix it
return false;
}
}
@ -172,27 +172,27 @@ Detailed instructions at http://www.github.com/vijithassar/d3textwrap
// check that we have the necessary conditions for this function to operate properly
if(
// selection it's operating on cannot be not empty
(selection.length == 0) ||
(selection.length == 0) ||
// d3 must be available
(!d3) ||
(!d3) ||
// desired wrapping bounds must be provided as an input argument
(!bounds) ||
(!bounds) ||
// input bounds must validate
(!verified_bounds)
(!verified_bounds)
) {
// try to return the calling selection if possible
// so as not to interfere with methods downstream in the
// chain
if(selection) {
return selection;
// if all else fails, just return false. if you hit this point then you're
// almost certainly trying to call the textwrap() method on something that
// doesn't make sense!
// if all else fails, just return false. if you hit this point then you're
// almost certainly trying to call the textwrap() method on something that
// doesn't make sense!
} else {
return false;
}
// if we've validated everything then we can finally proceed
// to the meat of this operation
// if we've validated everything then we can finally proceed
// to the meat of this operation
} else {
// reassign the verified bounds as the set we want
@ -241,6 +241,7 @@ Detailed instructions at http://www.github.com/vijithassar/d3textwrap
return_value = parent.select('foreignObject');
}
// wrap with tspans if foreignObject is undefined
var wrap_with_tspans = function(item) {
// operate on the first text item in the selection
@ -355,12 +356,18 @@ Detailed instructions at http://www.github.com/vijithassar/d3textwrap
substrings.push(temp);
text_node_selected.text('');
text_node_selected.text(word);
// Handle case where there is just one more word to be wrapped
if(i == text_to_wrap_array.length - 1) {
new_string = word;
text_node_selected.text(new_string);
new_width = text_node.getComputedTextLength();
}
}
}
// if we're up to the last word in the array,
// get the computed length as is without
// appending anything further to it
else if(i == text_to_wrap_array.length - 1) {
if(i == text_to_wrap_array.length - 1) {
text_node_selected.text('');
var final_string = new_string;
if(
@ -374,22 +381,6 @@ Detailed instructions at http://www.github.com/vijithassar/d3textwrap
}
}
// position the overall text node
text_node_selected.attr('y', function() {
var y_offset = bounds.y;
// shift by line-height to move the baseline into
// the bounds – otherwise the text baseline would be
// at the top of the bounds
if(line_height) {y_offset += line_height;}
return y_offset;
});
// shift to the right by the padding value
if(padding) {
text_node_selected
.attr('x', bounds.x)
;
}
// append each substring as a tspan
var current_tspan;
var tspan_count;
@ -417,23 +408,43 @@ Detailed instructions at http://www.github.com/vijithassar/d3textwrap
// is probably based on the full length of the
// text string until we make this adjustment
current_tspan
// .attr('dx', function() {
// if(i == 0) {
// var render_offset = 0;
// } else if(i > 0) {
// render_offset = substrings[i - 1].width;
// render_offset = render_offset * -1;
// }
// return render_offset;
// })
.attr('x', function() {
return bounds.x;
var x_offset = bounds.x;
if(padding) {x_offset += padding;}
return x_offset;
});
// .attr('dx', function() {
// if(i == 0) {
// var render_offset = 0;
// } else if(i > 0) {
// render_offset = substrings[i - 1].width;
// render_offset = render_offset * -1;
// }
// return render_offset;
// });
}
}
}
}
// position the overall text node, whether wrapped or not
text_node_selected.attr('y', function() {
var y_offset = bounds.y;
// shift by line-height to move the baseline into
// the bounds – otherwise the text baseline would be
// at the top of the bounds
if(line_height) {y_offset += line_height;}
// shift by padding, if it's there
if(padding) {y_offset += padding;}
return y_offset;
});
// shift to the right by the padding value
text_node_selected.attr('x', function() {
var x_offset = bounds.x;
if(padding) {x_offset += padding;}
return x_offset;
});
// assign our modified text node with tspans
// to the return value
return_value = d3.select(parent).selectAll('text');

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

@ -414,7 +414,7 @@ exports.draw = function (text, id,isDot) {
if(conf.useMaxWidth) {
// Center the graph
svg.attr("height", '100%');
svg.attr("width", '100%');
svg.attr("width", conf.width);
//svg.attr("viewBox", svgb.getBBox().x + ' 0 '+ g.graph().width+' '+ g.graph().height);
svg.attr("viewBox", '0 0 ' + (g.graph().width + 20) + ' ' + (g.graph().height + 20));
svg.attr('style', 'max-width:' + (g.graph().width + 20) + 'px;');

16
src/diagrams/sequenceDiagram/sequenceRenderer.js
View File

@ -138,21 +138,23 @@ var drawNote = function(elem, startx, verticalPos, msg){
var rectElem = svgDraw.drawRect(g, rect);
var textObj = svgDraw.getTextObj();
textObj.x = startx;
textObj.y = verticalPos;
textObj.x = startx-4;
textObj.y = verticalPos-13;
textObj.textMargin = conf.noteMargin;
textObj.dy = '1em';
textObj.text = msg.message;
textObj.class = 'noteText';
var textElem = svgDraw.drawText(g,textObj, conf.width);
var textElem = svgDraw.drawText(g,textObj, conf.width-conf.noteMargin);
var textHeight = textElem[0][0].getBBox().height;
if(textHeight > conf.width){
textElem.remove();
g = elem.append("g");
textElem = svgDraw.drawText(g,textObj, 2*conf.width);
//textObj.x = textObj.x - conf.width;
//textElem = svgDraw.drawText(g,textObj, 2*conf.noteMargin);
textElem = svgDraw.drawText(g,textObj, 2*conf.width-conf.noteMargin);
textHeight = textElem[0][0].getBBox().height;
rectElem.attr('width',2*conf.width);
exports.bounds.insert(startx, verticalPos, startx + 2*conf.width, verticalPos + 2*conf.noteMargin + textHeight);
@ -228,11 +230,11 @@ var drawMessage = function(elem, startx, stopx, verticalPos, msg){
line.attr("stroke", "black");
line.style("fill", "none"); // remove any fill colour
if (msg.type === sq.yy.LINETYPE.SOLID || msg.type === sq.yy.LINETYPE.DOTTED){
line.attr("marker-end", "url(#arrowhead)");
line.attr("marker-end", "url(" + window.location.protocol+'//'+window.location.host+window.location.pathname + "#arrowhead)");
}
if (msg.type === sq.yy.LINETYPE.SOLID_CROSS || msg.type === sq.yy.LINETYPE.DOTTED_CROSS){
line.attr("marker-end", "url(#crosshead)");
line.attr("marker-end", "url(" + window.location.protocol+'//'+window.location.host+window.location.pathname + "#crosshead)");
}
};

9
src/diagrams/sequenceDiagram/svgDraw.js
View File

@ -41,13 +41,14 @@ exports.drawText = function(elem, textData, width) {
var span = textElem.append('tspan');
span.attr('x', textData.x);
span.attr('dy', textData.dy);
//span.attr('x', textData.x);
span.attr('x', textData.x+textData.textMargin*2);
//span.attr('dy', textData.dy);
span.text(nText);
if(typeof textElem.textwrap !== 'undefined'){
textElem.textwrap({
x: textData.x+4, // bounding box is 300 pixels from the left
y: textData.y-2, // bounding box is 400 pixels from the top
x: textData.x, // bounding box is 300 pixels from the left
y: textData.y, // bounding box is 400 pixels from the top
width: width, // bounding box is 500 pixels across
height: 1800 // bounding box is 600 pixels tall
}, textData.textMargin);

378
src/main.js
View File

@ -1,378 +0,0 @@
var graph = require('./diagrams/flowchart/graphDb');
var flow = require('./diagrams/flowchart/parser/flow');
var utils = require('./utils');
var flowRenderer = require('./diagrams/flowchart/flowRenderer');
var seq = require('./diagrams/sequenceDiagram/sequenceRenderer');
var info = require('./diagrams/example/exampleRenderer');
var he = require('he');
var infoParser = require('./diagrams/example/parser/example');
var flowParser = require('./diagrams/flowchart/parser/flow');
var dotParser = require('./diagrams/flowchart/parser/dot');
var sequenceParser = require('./diagrams/sequenceDiagram/parser/sequenceDiagram');
var sequenceDb = require('./diagrams/sequenceDiagram/sequenceDb');
var infoDb = require('./diagrams/example/exampleDb');
var gantt = require('./diagrams/gantt/ganttRenderer');
var ganttParser = require('./diagrams/gantt/parser/gantt');
var ganttDb = require('./diagrams/gantt/ganttDb');
var d3 = require('./d3');
var nextId = 0;
var log = require('./logger').create();
/**
* Function that parses a mermaid diagram defintion. If parsing fails the parseError callback is called and an error is
* thrown and
* @param text
*/
var parse = function(text){
var graphType = utils.detectType(text);
var parser;
switch(graphType){
case 'graph':
parser = flowParser;
parser.parser.yy = graph;
break;
case 'dotGraph':
parser = dotParser;
parser.parser.yy = graph;
break;
case 'sequenceDiagram':
parser = sequenceParser;
parser.parser.yy = sequenceDb;
break;
case 'info':
parser = infoParser;
parser.parser.yy = infoDb;
break;
case 'gantt':
parser = ganttParser;
parser.parser.yy = ganttDb;
break;
}
try{
parser.parse(text);
return true;
}
catch(err){
return false;
}
};
/**
* Function that goes through the document to find the chart definitions in there and render them.
*
* The function tags the processed attributes with the attribute data-processed and ignores found elements with the
* attribute already set. This way the init function can be triggered several times.
*
* Optionally, `init` can accept in the second argument one of the following:
* - a DOM Node
* - an array of DOM nodes (as would come from a jQuery selector)
* - a W3C selector, a la `.mermaid`
*
* ```
* graph LR;
* a(Find elements)-->b{Processed};
* b-->|Yes|c(Leave element);
* c-->|No |d(Transform);
* ```
*/
/**
* Renders the mermaid diagrams
* @* param nodes- a css selector or an array of nodes
*/
var init = function () {
var nodes;
if(arguments.length === 2){
// sequence config was passed as #1
if(typeof arguments[0] !== 'undefined'){
mermaid.sequenceConfig = arguments[0];
}
nodes = arguments[1];
}
else{
nodes = arguments[0];
}
nodes = nodes === undefined ? document.querySelectorAll('.mermaid')
: typeof nodes === "string" ? document.querySelectorAll(nodes)
: nodes instanceof Node ? [nodes]
// Last case - sequence config was passed pick next
: nodes;
var i;
log.debug('Found ',nodes.length,' nodes');
for (i = 0; i < nodes.length; i++) {
var element = nodes[i];
// Check if previously processed
if(!element.getAttribute("data-processed")) {
element.setAttribute("data-processed", true);
} else {
continue;
}
var id = 'mermaidChart' + nextId++;
var txt = element.innerHTML;
txt = txt.replace(/>/g,'&gt;');
txt = txt.replace(/</g,'&lt;');
txt = he.decode(txt).trim();
element.innerHTML = '<svg id="' + id + '" width="100%" xmlns="http://www.w3.org/2000/svg">' +
'<g />' +
'</svg>';
var graphType = utils.detectType(txt);
var classes = {};
switch(graphType){
case 'graph':
classes = flowRenderer.getClasses(txt, false);
if(typeof mermaid.flowchartConfig === 'object'){
flowRenderer.setConf(mermaid.flowchartConfig);
}
flowRenderer.draw(txt, id, false);
utils.cloneCssStyles(element.firstChild, classes);
graph.bindFunctions();
break;
case 'dotGraph':
classes = flowRenderer.getClasses(txt, true);
flowRenderer.draw(txt, id, true);
utils.cloneCssStyles(element.firstChild, classes);
break;
case 'sequenceDiagram':
if(typeof mermaid.sequenceConfig === 'object'){
seq.setConf(mermaid.sequenceConfig);
}
seq.draw(txt,id);
utils.cloneCssStyles(element.firstChild, []);
break;
case 'gantt':
if(typeof mermaid.ganttConfig === 'object'){
gantt.setConf(mermaid.ganttConfig);
}
gantt.draw(txt,id);
utils.cloneCssStyles(element.firstChild, []);
break;
case 'info':
info.draw(txt,id,exports.version());
utils.cloneCssStyles(element.firstChild, []);
break;
}
}
};
exports.tester = function(){};
/**
* Function returning version information
* @returns {string} A string containing the version info
*/
exports.version = function(){
return require('../package.json').version;
};
var equals = function (val, variable){
if(typeof variable === 'undefined'){
return false;
}
else{
return (val === variable);
}
};
var render = function(id, txt,cb){
// var element = doc.createElement('svg');
// element.setAttribute('id',id);
// element.setAttribute('width','100%');
// element.setAttribute('xmlns','http://www.w3.org/2000/svg');
// element.innerHTML = '<g />';
//var element = doc.createElement('div');
//element.setAttribute('id','d'+id);
//
//element.innerHTML = '<svg id="' + id + '" width="100%" xmlns="http://www.w3.org/2000/svg">' +
// '<g />' +
// '</svg>';
//document.body.appendChild(element);
d3.select('body').append('div')
.attr('id', 'd'+id)
.append('svg')
.attr('id', id)
.attr('width','100%')
.attr('xmlns','http://www.w3.org/2000/svg')
.append('g');
log.debug(d3.select('#d'+id).node().innerHTML);
var element = d3.select('#d'+id).node();
var graphType = utils.detectType(txt);
var classes = {};
switch(graphType){
case 'graph':
classes = flowRenderer.getClasses(txt, false);
if(typeof mermaid.flowchartConfig === 'object'){
flowRenderer.setConf(mermaid.flowchartConfig);
}
flowRenderer.draw(txt, id, false);
utils.cloneCssStyles(element.firstChild, classes);
graph.bindFunctions();
break;
case 'dotGraph':
classes = flowRenderer.getClasses(txt, true);
flowRenderer.draw(txt, id, true);
utils.cloneCssStyles(element.firstChild, classes);
break;
case 'sequenceDiagram':
if(typeof mermaid.sequenceConfig === 'object'){
seq.setConf(mermaid.sequenceConfig);
}
seq.draw(txt,id);
utils.cloneCssStyles(element.firstChild, []);
break;
case 'gantt':
if(typeof mermaid.ganttConfig === 'object'){
gantt.setConf(mermaid.ganttConfig);
}
gantt.draw(txt,id);
utils.cloneCssStyles(element.firstChild, []);
break;
case 'info':
info.draw(txt,id,exports.version());
utils.cloneCssStyles(element.firstChild, []);
break;
}
//log.debug(document.body.innerHTML);
cb(d3.select('#d'+id).node().innerHTML);
d3.select('#d'+id).node().remove();
};
exports.render = function(id, text){
var callback = function(svgText){
log.debug(svgText);
};
if(typeof document === 'undefined'){
//jsdom = require('jsdom').jsdom;
//log.debug(jsdom);
//htmlStub = '<html><head></head><body><div class="mermaid">'+text+'</div><script src="dist/mermaid.full.js"></script><script>var mermaid_config = {startOnLoad:true}</script></body></html>';
htmlStub = '<html><head></head><body></body></html>';
// // html file skull with a container div for the d3 dataviz
//
// pass the html stub to jsDom
/* jsdom.env({
features : { QuerySelectorAll : true },
html : htmlStub,
done : function(errors, win) {
// process the html document, like if we were at client side
// code to generate the dataviz and process the resulting html file to be added here
//var d3 = require('d3');
//log.debug('Here we go: '+JSON.stringify(d3));
global.document = win.document;
global.window = win;
var element = win.document.createElement('div');
element.setAttribute('id','did');
//document.
log.debug(document.body.innerHTML);
//log.debug('Element:',element);
//log.debug(win);
//mermaid.init();
//render(win.document, 'myId', text, callback);
}
});*/
//var jsdom = require('jsdom').jsdom;
//global.document = jsdom(htmlStub);
//global.window = document.parentWindow;
render(id, text, callback);
//var element = win.document.createElement('div');
//element.setAttribute('id','did');
//document.
}
else{
// In browser
render( id, text, callback);
}
};
global.mermaid = {
startOnLoad: true,
htmlLabels: true,
init: function(sequenceConfig, nodes) {
init.apply(null, arguments);
},
version: function() {
return exports.version();
},
getParser: function() {
return flow.parser;
},
parse: function(text) {
return parse(text);
},
parseError: function(err, hash) {
log.debug('Mermaid Syntax error:');
log.debug(err);
},
render:function(id, text){
return exports.render(id, text);
}
};
exports.contentLoaded = function(){
// Check state of start config mermaid namespace
//log.debug('global.mermaid.startOnLoad',global.mermaid.startOnLoad);
//log.debug('mermaid_config',mermaid_config);
if (typeof mermaid_config !== 'undefined') {
if (equals(false, mermaid_config.htmlLabels)) {
global.mermaid.htmlLabels = false;
}
}
if(global.mermaid.startOnLoad) {
// For backwards compatability reasons also check mermaid_config variable
if (typeof mermaid_config !== 'undefined') {
// Check if property startOnLoad is set
if (equals(true, mermaid_config.startOnLoad)) {
global.mermaid.init();
}
}
else {
// No config found, do autostart in this simple case
global.mermaid.init();
}
}
};
if(typeof document !== 'undefined'){
/**
* Wait for document loaded before starting the execution
*/
document.addEventListener('DOMContentLoaded', function(){
exports.contentLoaded();
}, false);
}

49
src/mermaid.js
View File

@ -1,8 +1,22 @@
//(function (root, factory) {
// if (typeof exports === 'object') {
// // CommonJS
// module.exports = factory(require('b'));
// } else if (typeof define === 'function' && define.amd) {
// // AMD
// define(['b'], function (b) {
// return (root.returnExportsGlobal = factory(b));
// });
// } else {
// // Global Variables
// root.returnExportsGlobal = factory(root.b);
// }
//}(this, function (b) {
/**
* Web page integration module for the mermaid framework. It uses the mermaidAPI for mermaid functionality and to render
* the diagrams to svg code.
*/
var he = require('he');
var mermaidAPI = require('./mermaidAPI');
var nextId = 0;
var log = require('./logger').create();
@ -14,12 +28,12 @@ module.exports.mermaidAPI = mermaidAPI;
*
* The function tags the processed attributes with the attribute data-processed and ignores found elements with the
* attribute already set. This way the init function can be triggered several times.
*
*
* Optionally, `init` can accept in the second argument one of the following:
* - a DOM Node
* - an array of DOM nodes (as would come from a jQuery selector)
* - a W3C selector, a la `.mermaid`
*
*
* ```mermaid
* graph LR;
* a(Find elements)-->b{Processed}
@ -35,7 +49,7 @@ var init = function () {
if(arguments.length >= 2){
/*! sequence config was passed as #1 */
if(typeof arguments[0] !== 'undefined'){
mermaid.sequenceConfig = arguments[0];
mermaid.sequenceConfig = arguments[0];
}
nodes = arguments[1];
@ -65,14 +79,12 @@ var init = function () {
: nodes instanceof Node ? [nodes]
/*! Last case - sequence config was passed pick next */
: nodes;
var i;
if(typeof mermaid_config !== 'undefined'){
mermaidAPI.initialize(mermaid_config);
}
log.debug('Start On Load before: '+mermaid.startOnLoad);
if(typeof mermaid.startOnLoad !== 'undefined'){
log.debug('Start On Load inner: '+mermaid.startOnLoad);
@ -91,7 +103,7 @@ var init = function () {
callback(id);
}
};
for (i = 0; i < nodes.length; i++) {
var element = nodes[i];
@ -104,6 +116,7 @@ var init = function () {
var id = 'mermaidChart' + nextId++;
var he = require('he');
var txt = element.innerHTML;
txt = txt.replace(/>/g,'&gt;');
txt = txt.replace(/</g,'&lt;');
@ -165,7 +178,7 @@ var equals = function (val, variable){
global.mermaid = {
startOnLoad: true,
htmlLabels: true,
init: function(sequenceConfig, nodes) {
init.apply(null, arguments);
},
@ -225,11 +238,17 @@ exports.contentLoaded = function(){
}
}
}else{
config = mermaidAPI.getConfig();
if(config.startOnLoad){
global.mermaid.init();
if(typeof global.mermaid === 'undefined' ){
if(typeof global.mermaid.startOnLoad === 'undefined' ){
}
log.debug('In start, no config');
config = mermaidAPI.getConfig();
if(config.startOnLoad){
global.mermaid.init();
}
}
}
};
@ -244,3 +263,7 @@ if(typeof document !== 'undefined'){
exports.contentLoaded();
}, false);
}
// // Your actual module
// return module.exports;
//}));

167
src/mermaidAPI.js
View File

@ -1,4 +1,9 @@
/**
* ---
* title: mermaidAPI
* order: 5
* ---
* #mermaidAPI
* This is the api to be used when handling the integration with the web page instead of using the default integration
* (mermaid.js).
*
@ -26,7 +31,7 @@ var nextId = 0;
var log = require('./logger').create();
/**
* ## Configurations for diagram generation
* ## Configuration
* These are the default options which can be overridden with the initialization call as in the example below:
* ```
* mermaid.initialize({
@ -37,112 +42,173 @@ var log = require('./logger').create();
* ```
*/
var config = {
// **cloneCssStyles** - This options controls whether or not the css rules should be copied into the generated svg
/**
* **cloneCssStyles** - This options controls whether or not the css rules should be copied into the generated svg
*/
cloneCssStyles: true,
// ## flowchart
// *The object containing configurations specific for flowcharts*
/**
* **startOnLoad** - This options controls whether or mermaid starts when the page loads
*/
startOnLoad: true,
/**
* ### flowchart
* *The object containing configurations specific for flowcharts*
*/
flowchart:{
// **htmlLabels** - Flag for setting whether or not a html tag should be used for rendering labels
// on the edges
/**
* **htmlLabels** - Flag for setting whether or not a html tag should be used for rendering labels
* on the edges
*/
htmlLabels:true,
// **useMaxWidth** - Flag for setting whether or not a all available width should be used for
// the diagram.
/**
* **useMaxWidth** - Flag for setting whether or not a all available width should be used for
* the diagram.
*/
useMaxWidth:true
},
// ## sequenceDiagram
// *The object containing configurations specific for sequence diagrams*
/**
* ### sequenceDiagram
* The object containing configurations specific for sequence diagrams
*/
sequenceDiagram:{
// **diagramMarginX** - margin to the right and left of the sequence diagram
/**
* **diagramMarginX** - margin to the right and left of the sequence diagram
*/
diagramMarginX:50,
// **diagramMarginY** - margin to the over and under the sequence diagram
/**
* **diagramMarginY** - margin to the over and under the sequence diagram
*/
diagramMarginY:10,
// **actorMargin** - Margin between actors
/**
* **actorMargin** - Margin between actors
*/
actorMargin:50,
// **width** - Width of actor moxes
/**
* **width** - Width of actor boxes
*/
width:150,
// **height** - Height of actor boxes
/**
* **height** - Height of actor boxes
*/
height:65,
// **boxMargin** - Margin around loop boxes
/**
* **boxMargin** - Margin around loop boxes
*/
boxMargin:10,
// **boxTextMargin** - margin around the text in loop/alt/opt boxes
/**
* **boxTextMargin** - margin around the text in loop/alt/opt boxes
*/
boxTextMargin:5,
// **noteMargin** - margin around notes
/**
* **noteMargin** - margin around notes
*/
noteMargin:10,
// **messageMargin** - Space between messages
/**
* **messageMargin** - Space between messages
*/
messageMargin:35,
// **mirrorActors** - mirror actors under diagram
/**
* **mirrorActors** - mirror actors under diagram
*/
mirrorActors:true,
// **bottomMarginAdj** - Depending on css styling this might need adjustment
// Prolongs the edge of the diagram downwards
/**
* **bottomMarginAdj** - Depending on css styling this might need adjustment.
* Prolongs the edge of the diagram downwards
*/
bottomMarginAdj: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
/**
* **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
*/
useMaxWidth:true
},
// ## gantt
// *The object containing configurations specific for gantt diagrams*
/** ### gantt
* The object containing configurations specific for gantt diagrams*
*/
gantt:{
// **titleTopMargin** - margin top for the text over the gantt diagram
/**
* **titleTopMargin** - margin top for the text over the gantt diagram
*/
titleTopMargin: 25,
// **barHeight** - the height of the bars in the graph
/**
* **barHeight** - the height of the bars in the graph
*/
barHeight: 20,
// **barGap** - the margin between the different activities in the gantt diagram
/**
* **barGap** - the margin between the different activities in the gantt diagram
*/
barGap: 4,
// **topPadding** - margin between title and gantt diagram and between axis and gantt diagram.
/**
* **topPadding** - margin between title and gantt diagram and between axis and gantt diagram.
*/
topPadding: 50,
// **sidePadding** - the space allocated for the section name to the left of the activities.
/**
* **sidePadding** - the space allocated for the section name to the left of the activities.
*/
sidePadding: 75,
// **gridLineStartPadding** - Vertical starting position of the grid lines
/**
* **gridLineStartPadding** - Vertical starting position of the grid lines
*/
gridLineStartPadding: 35,
// **fontSize** - font size ...
/**
* **fontSize** - font size ...
*/
fontSize: 11,
// **fontFamily** - font family ...
/**
* **fontFamily** - font family ...
*/
fontFamily: '"Open-Sans", "sans-serif"',
// **numberSectionStyles** - the number of alternating section styles
/**
* **numberSectionStyles** - the number of alternating section styles
*/
numberSectionStyles:3,
// **axisFormatter** - formatting of the axis, this might need adjustment to match your locale and preferences
/**
* **axisFormatter** - formatting of the axis, this might need adjustment to match your locale and preferences
*/
axisFormatter: [
/*! Within a day*/
// Within a day
["%I:%M", function (d) {
return d.getHours();
}],
/*! Monday a week*/
// Monday a week
["w. %U", function (d) {
return d.getDay() == 1;
}],
/*! Day within a week (not monday) */
// Day within a week (not monday)
["%a %d", function (d) {
return d.getDay() && d.getDate() != 1;
}],
/*! within a month */
// within a month
["%b %d", function (d) {
return d.getDate() != 1;
}],
/*! Month */
// Month
["%m-%y", function (d) {
return d.getMonth();
}]
@ -151,8 +217,8 @@ var config = {
};
/**
* # parse
* Function that parses a mermaid diagram defintion. If parsing fails the parseError callback is called and an error is
* ## parse
* Function that parses a mermaid diagram definition. If parsing fails the parseError callback is called and an error is
* thrown and
* @param text
*/
@ -194,7 +260,7 @@ var parse = function(text){
exports.parse = parse;
/**
* # version
* ## version
* Function returning version information
* @returns {string} A string containing the version info
*/
@ -203,7 +269,7 @@ exports.version = function(){
};
/**
* #render
* ##render
* Function that renders an svg with a graph from a chart definition. Usage example below.
*
* ```
@ -289,10 +355,12 @@ var render = function(id, txt, cb, container){
break;
}
if(typeof cb !== 'undefined'){
cb(d3.select('#d'+id).node().innerHTML,graph.bindFunctions);
}else{
// Fix for when the base tag is used
var svgCode = d3.select('#d'+id).node().innerHTML.replace(/url\(#arrowhead/g,'url('+ window.location.protocol+'//'+location.host+location.pathname +'#arrowhead','g');
if(typeof cb !== 'undefined'){
cb(svgCode,graph.bindFunctions);
}else{
log.warn('CB = undefined');
}
@ -361,5 +429,6 @@ global.mermaidAPI = {
parse : exports.parse,
initialize : exports.initialize,
detectType : utils.detectType,
parseError : exports.parseError
parseError : exports.parseError,
getConfig : exports.getConfig
};