mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-10-12 02:29:37 +02:00
Compare commits
8 Commits
Author | SHA1 | Date | |
---|---|---|---|
![]() |
cb58aeab25 | ||
![]() |
20d927ce66 | ||
![]() |
c0a4cfc2d7 | ||
![]() |
2274c925b5 | ||
![]() |
b4b53cce37 | ||
![]() |
7d2552c266 | ||
![]() |
31883e02e7 | ||
![]() |
ef7b9bbecf |
@@ -67,9 +67,9 @@ Would end up like this:
|
||||
</svg>
|
||||
</div>
|
||||
```
|
||||
|
||||
An id is also added to mermaid tags without id.
|
||||
|
||||
|
||||
# A graph example
|
||||
|
||||
```
|
||||
@@ -219,4 +219,4 @@ A---|This is the text|B;
|
||||

|
||||
|
||||
# Credits
|
||||
Many thanks to the [d3](http://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!!!
|
||||
Many thanks to the [d3](http://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!!!
|
||||
|
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "mermaid",
|
||||
"version": "0.1.1",
|
||||
"version": "0.2.2",
|
||||
"authors": [
|
||||
"knsv <knut@sveido.com>"
|
||||
],
|
||||
|
13
dist/mermaid.full.js
vendored
13
dist/mermaid.full.js
vendored
@@ -417,7 +417,7 @@ var addEdges = function (edges, g) {
|
||||
// Add the edge to the graph
|
||||
if (typeof edge.text === 'undefined') {
|
||||
if(typeof edge.style === 'undefined'){
|
||||
g.setEdge(edge.start, edge.end,{ arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
|
||||
g.setEdge(edge.start, edge.end,{ style: "stroke: #333; stroke-width: 1.5px;fill:none", arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
|
||||
}else{
|
||||
g.setEdge(edge.start, edge.end, {
|
||||
style: edge.style, arrowheadStyle: "fill: #333", arrowhead: aHead
|
||||
@@ -428,8 +428,7 @@ var addEdges = function (edges, g) {
|
||||
else {
|
||||
|
||||
if(typeof edge.style === 'undefined'){
|
||||
console.log('Edge with Text no style: '+edge.text);
|
||||
g.setEdge(edge.start, edge.end,{label: edge.text, arrowheadStyle: "fill: #33f", arrowhead: aHead},cnt);
|
||||
g.setEdge(edge.start, edge.end,{style: "stroke: #333; stroke-width: 1.5px;fill:none", label: edge.text, arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
|
||||
}else{
|
||||
|
||||
g.setEdge(edge.start, edge.end, {
|
||||
@@ -480,9 +479,6 @@ var drawChart = function (text, id) {
|
||||
classes.default = {id:'default'};
|
||||
classes.default.styles = ['fill:#eaeaea','stroke:#666','stroke-width:1.5px'];
|
||||
}
|
||||
|
||||
console.log(classes);
|
||||
|
||||
addVertices(vert, g);
|
||||
addEdges(edges, g);
|
||||
|
||||
@@ -548,7 +544,6 @@ var drawChart = function (text, id) {
|
||||
* Go through the document and find the chart definitions in there and render the charts
|
||||
*/
|
||||
var init = function () {
|
||||
console.log('Mermaid v'+exports.version()+' starting');
|
||||
var arr = document.querySelectorAll('.mermaid');
|
||||
|
||||
var cnt = 0;
|
||||
@@ -575,7 +570,7 @@ var init = function () {
|
||||
* @returns {string}
|
||||
*/
|
||||
exports.version = function(){
|
||||
return '0.2.0';
|
||||
return '0.2.2';
|
||||
}
|
||||
|
||||
var equals = function (val, variable){
|
||||
@@ -688,7 +683,6 @@ exports.addClass = function (id, style) {
|
||||
if (typeof style !== 'undefined') {
|
||||
if (style !== null) {
|
||||
style.forEach(function (s) {
|
||||
console.log('Adding style'+s)
|
||||
classes[id].styles.push(s);
|
||||
});
|
||||
}
|
||||
@@ -708,7 +702,6 @@ exports.setDirection = function (dir) {
|
||||
* @param dir
|
||||
*/
|
||||
exports.setClass = function (id,className) {
|
||||
console.log('Got id:'+id);
|
||||
if(id.indexOf(',')>0){
|
||||
id.split(',').forEach(function(id2){
|
||||
if(typeof vertices[id2] !== 'undefined'){
|
||||
|
2
dist/mermaid.full.min.js
vendored
2
dist/mermaid.full.min.js
vendored
File diff suppressed because one or more lines are too long
13
dist/mermaid.slim.js
vendored
13
dist/mermaid.slim.js
vendored
@@ -385,7 +385,7 @@ var addEdges = function (edges, g) {
|
||||
// Add the edge to the graph
|
||||
if (typeof edge.text === 'undefined') {
|
||||
if(typeof edge.style === 'undefined'){
|
||||
g.setEdge(edge.start, edge.end,{ arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
|
||||
g.setEdge(edge.start, edge.end,{ style: "stroke: #333; stroke-width: 1.5px;fill:none", arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
|
||||
}else{
|
||||
g.setEdge(edge.start, edge.end, {
|
||||
style: edge.style, arrowheadStyle: "fill: #333", arrowhead: aHead
|
||||
@@ -396,8 +396,7 @@ var addEdges = function (edges, g) {
|
||||
else {
|
||||
|
||||
if(typeof edge.style === 'undefined'){
|
||||
console.log('Edge with Text no style: '+edge.text);
|
||||
g.setEdge(edge.start, edge.end,{label: edge.text, arrowheadStyle: "fill: #33f", arrowhead: aHead},cnt);
|
||||
g.setEdge(edge.start, edge.end,{style: "stroke: #333; stroke-width: 1.5px;fill:none", label: edge.text, arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
|
||||
}else{
|
||||
|
||||
g.setEdge(edge.start, edge.end, {
|
||||
@@ -448,9 +447,6 @@ var drawChart = function (text, id) {
|
||||
classes.default = {id:'default'};
|
||||
classes.default.styles = ['fill:#eaeaea','stroke:#666','stroke-width:1.5px'];
|
||||
}
|
||||
|
||||
console.log(classes);
|
||||
|
||||
addVertices(vert, g);
|
||||
addEdges(edges, g);
|
||||
|
||||
@@ -516,7 +512,6 @@ var drawChart = function (text, id) {
|
||||
* Go through the document and find the chart definitions in there and render the charts
|
||||
*/
|
||||
var init = function () {
|
||||
console.log('Mermaid v'+exports.version()+' starting');
|
||||
var arr = document.querySelectorAll('.mermaid');
|
||||
|
||||
var cnt = 0;
|
||||
@@ -543,7 +538,7 @@ var init = function () {
|
||||
* @returns {string}
|
||||
*/
|
||||
exports.version = function(){
|
||||
return '0.2.0';
|
||||
return '0.2.2';
|
||||
}
|
||||
|
||||
var equals = function (val, variable){
|
||||
@@ -656,7 +651,6 @@ exports.addClass = function (id, style) {
|
||||
if (typeof style !== 'undefined') {
|
||||
if (style !== null) {
|
||||
style.forEach(function (s) {
|
||||
console.log('Adding style'+s)
|
||||
classes[id].styles.push(s);
|
||||
});
|
||||
}
|
||||
@@ -676,7 +670,6 @@ exports.setDirection = function (dir) {
|
||||
* @param dir
|
||||
*/
|
||||
exports.setClass = function (id,className) {
|
||||
console.log('Got id:'+id);
|
||||
if(id.indexOf(',')>0){
|
||||
id.split(',').forEach(function(id2){
|
||||
if(typeof vertices[id2] !== 'undefined'){
|
||||
|
2
dist/mermaid.slim.min.js
vendored
2
dist/mermaid.slim.min.js
vendored
File diff suppressed because one or more lines are too long
38
package.json
38
package.json
@@ -6,24 +6,36 @@
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/username/repository.git"
|
||||
},
|
||||
"author": "",
|
||||
"license": "BSD-2-Clause",
|
||||
"devDependencies": {
|
||||
"gulp": "~3.8.9",
|
||||
"jison": "~0.4.15",
|
||||
"jasmine": "~2.0.1",
|
||||
"gulp-jison": "~1.0.0",
|
||||
"karma": "~0.12.20",
|
||||
"karma-jasmine": "~0.2.1",
|
||||
"karma-chrome-launcher": "~0.1.5",
|
||||
"karma-requirejs": "~0.2.2",
|
||||
"gulp-concat": "~2.4.1",
|
||||
"gulp-uglify": "~1.0.1",
|
||||
"gulp-ext-replace": "~0.1.0",
|
||||
"browserify": "~6.2.0",
|
||||
"gulp-jasmine": "~1.0.1",
|
||||
"d3": "~3.4.13",
|
||||
"dagre-d3": "~0.3.2",
|
||||
"gulp-rename": "~1.2.0"
|
||||
"gulp": "~3.8.9",
|
||||
"gulp-concat": "~2.4.1",
|
||||
"gulp-ext-replace": "~0.1.0",
|
||||
"gulp-jasmine": "~1.0.1",
|
||||
"gulp-jison": "~1.0.0",
|
||||
"gulp-rename": "~1.2.0",
|
||||
"gulp-uglify": "~1.0.1",
|
||||
"jasmine": "~2.0.1",
|
||||
"jison": "~0.4.15",
|
||||
"karma": "~0.12.20",
|
||||
"karma-chrome-launcher": "~0.1.5",
|
||||
"karma-jasmine": "~0.2.1",
|
||||
"karma-requirejs": "~0.2.2",
|
||||
"lodash": "^2.4.1",
|
||||
"lodash._escapestringchar": "^2.4.1",
|
||||
"lodash._objecttypes": "^2.4.1",
|
||||
"lodash._reinterpolate": "^2.4.1",
|
||||
"lodash._reunescapedhtml": "^2.4.1",
|
||||
"lodash.defaults": "^2.4.1",
|
||||
"lodash.templatesettings": "^2.4.1",
|
||||
"lodash.values": "^2.4.1"
|
||||
}
|
||||
}
|
||||
|
@@ -72,7 +72,6 @@ exports.addClass = function (id, style) {
|
||||
if (typeof style !== 'undefined') {
|
||||
if (style !== null) {
|
||||
style.forEach(function (s) {
|
||||
console.log('Adding style'+s)
|
||||
classes[id].styles.push(s);
|
||||
});
|
||||
}
|
||||
@@ -92,7 +91,6 @@ exports.setDirection = function (dir) {
|
||||
* @param dir
|
||||
*/
|
||||
exports.setClass = function (id,className) {
|
||||
console.log('Got id:'+id);
|
||||
if(id.indexOf(',')>0){
|
||||
id.split(',').forEach(function(id2){
|
||||
if(typeof vertices[id2] !== 'undefined'){
|
||||
|
11
src/main.js
11
src/main.js
@@ -88,7 +88,7 @@ var addEdges = function (edges, g) {
|
||||
// Add the edge to the graph
|
||||
if (typeof edge.text === 'undefined') {
|
||||
if(typeof edge.style === 'undefined'){
|
||||
g.setEdge(edge.start, edge.end,{ arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
|
||||
g.setEdge(edge.start, edge.end,{ style: "stroke: #333; stroke-width: 1.5px;fill:none", arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
|
||||
}else{
|
||||
g.setEdge(edge.start, edge.end, {
|
||||
style: edge.style, arrowheadStyle: "fill: #333", arrowhead: aHead
|
||||
@@ -99,8 +99,7 @@ var addEdges = function (edges, g) {
|
||||
else {
|
||||
|
||||
if(typeof edge.style === 'undefined'){
|
||||
console.log('Edge with Text no style: '+edge.text);
|
||||
g.setEdge(edge.start, edge.end,{label: edge.text, arrowheadStyle: "fill: #33f", arrowhead: aHead},cnt);
|
||||
g.setEdge(edge.start, edge.end,{style: "stroke: #333; stroke-width: 1.5px;fill:none", label: edge.text, arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
|
||||
}else{
|
||||
|
||||
g.setEdge(edge.start, edge.end, {
|
||||
@@ -151,9 +150,6 @@ var drawChart = function (text, id) {
|
||||
classes.default = {id:'default'};
|
||||
classes.default.styles = ['fill:#eaeaea','stroke:#666','stroke-width:1.5px'];
|
||||
}
|
||||
|
||||
console.log(classes);
|
||||
|
||||
addVertices(vert, g);
|
||||
addEdges(edges, g);
|
||||
|
||||
@@ -219,7 +215,6 @@ var drawChart = function (text, id) {
|
||||
* Go through the document and find the chart definitions in there and render the charts
|
||||
*/
|
||||
var init = function () {
|
||||
console.log('Mermaid v'+exports.version()+' starting');
|
||||
var arr = document.querySelectorAll('.mermaid');
|
||||
|
||||
var cnt = 0;
|
||||
@@ -246,7 +241,7 @@ var init = function () {
|
||||
* @returns {string}
|
||||
*/
|
||||
exports.version = function(){
|
||||
return '0.2.0';
|
||||
return '0.2.2';
|
||||
}
|
||||
|
||||
var equals = function (val, variable){
|
||||
|
@@ -61,7 +61,7 @@ statement
|
||||
|
||||
action:
|
||||
SQS SQE
|
||||
{console.log('#a');$$='action';}
|
||||
{$$='action';}
|
||||
;
|
||||
|
||||
actorDefinition:
|
||||
|
@@ -1,95 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../dist/mermaid.full.min.js"></script>
|
||||
<style id="css">
|
||||
/* This sets the color for "TK" nodes to a light blue green. */
|
||||
g.type-TK > rect {
|
||||
fill: #00ffd0;
|
||||
}
|
||||
|
||||
text {
|
||||
font-weight: 300;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.node rect {
|
||||
stroke: #999;
|
||||
fill: #f99;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.edgePath path {
|
||||
stroke: #333;
|
||||
stroke-width: 1.5px;
|
||||
fill:#fff;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var mermaid_config = {
|
||||
startOnLoad:false
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mermaid">
|
||||
graph TD;
|
||||
df103do1[Start 103 == 1];
|
||||
df103do1-->df103do30[Switch 103 30];
|
||||
df103do30-->|Schedule Kvällsmeny Open|df103do70[Menu 103 70];
|
||||
df103do30-->|Schedule Kvällsmeny Closed|df103do35[Start 103 35];
|
||||
df103do35-->df103do40[Gosub 103 40];
|
||||
df103do40-->|Sub|df104do1[Start 104 1];
|
||||
df104do1-->df104do3[Phrase StängtInfoTelefontid 104 3];
|
||||
df104do3-->df104do4[Phrase StängtInfoSkadeärende 104 4];
|
||||
df104do4-->df104do5[Phrase StängtInfoOmbud 104 5];
|
||||
df104do5-->df104do6[Phrase InfoWebbplats 104 6];
|
||||
df104do6-->df104do7[Phrase TackOchVälkommenÅter 104 7];
|
||||
df104do7-->df104do8[Return 104 8];
|
||||
df104do8-->df103do50[Goto 103 50];
|
||||
df103do50-->df103do998[Start 103 998];
|
||||
df103do998-->df103do999[Drop 103 999];
|
||||
|
||||
df103do70-->|1|df103do110[Start 103 110];
|
||||
df103do110-->df103do116[Goto 103 116];
|
||||
df103do116-->df6do10[Start 6 10];
|
||||
df6do10-->df6do11[Switch 6 11];
|
||||
df6do11-->|Öppet|df6do200[Route CG route 6 200];
|
||||
|
||||
df103do70-->|2|df103do120[Start 103 120];
|
||||
df103do120-->df103do126[Goto 103 126];
|
||||
df103do126-->df6do10[Start 6 10];
|
||||
df6do10-->df6do11[Switch 6 11];
|
||||
df6do11-->|Öppet|df6do200[Route CG route 6 200];
|
||||
|
||||
df103do70-->|3|df103do130[Start 103 130];
|
||||
df103do130-->df103do136[Goto 103 136];
|
||||
df103do136-->df6do10[Start 6 10];
|
||||
df6do10-->df6do11[Switch 6 11];
|
||||
df6do11-->|Öppet|df6do200[Route CG route 6 200];
|
||||
|
||||
df103do70-->|invalid|df103do80[Goto 103 80];
|
||||
df103do80-->df103do180[Start 103 180];
|
||||
df103do180-->df103do184[Phrase MenyOkäntval 103 184];
|
||||
df103do184-->df103do186[Goto 103 186];
|
||||
df103do186-->df103do300[Start 103 300];
|
||||
df103do300-->df103do305[Counter 103 305];
|
||||
df103do70-->|timeout|df103do85[Goto 103 85];
|
||||
df103do85-->df103do300;
|
||||
df103do305-->|2x|df103do310[Phrase MenyFörsökigen 103 310];
|
||||
df103do310-->df103do315[Goto 103 315];
|
||||
df103do315-->df103do65[Start 103 65];
|
||||
df103do65-->df103do70;
|
||||
df103do305-->|3x|df103do325[Goto 103 325];
|
||||
df103do325-->df103do984[Start 103 984];
|
||||
df103do984-->df103do985[Gosub 103 985];
|
||||
df103do985-->|Sub|df105do1[Start 105 1];
|
||||
df105do1-->df105do3[Phrase InfoWebbplats 105 3];
|
||||
df105do3-->df105do4[Phrase TackOchVälkommenÅter 105 4];
|
||||
df105do4-->df105do8[Return 105 8];
|
||||
df105do8-->df103do990[Goto 103 990];
|
||||
df103do990-->df103do998;
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
@@ -2,32 +2,6 @@
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<style id="css">
|
||||
/* This sets the color for "TK" nodes to a light blue green. */
|
||||
g.type-TK > rect {
|
||||
fill: #ccffd0;
|
||||
}
|
||||
|
||||
text {
|
||||
font-weight: 300;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.node rect {
|
||||
stroke: #999;
|
||||
fill: #fff;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.edgePath path {
|
||||
stroke: #333;
|
||||
stroke-width: 1.5px;
|
||||
fill:#fff;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
<script src="../dist/mermaid.full.js"></script>
|
||||
<scrpt>
|
||||
var mermaid_config = {
|
||||
|
Reference in New Issue
Block a user