mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Wit

This commit is contained in:
knsv 2015-09-26 18:30:13 +02:00
parent 709ebe524d
commit dc1a6ba8b5
20 changed files with 232 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
dist/mermaid.js vendored
View File

@ -32197,15 +32197,13 @@ exports.getClasses = function (text, isDot) {
// Parse the graph definition
parser.parse(text);
var classDefStylesObj = {};
var classDefStyleStr = '';
var classes = graph.getClasses();
// Add default class if undefined
if(typeof(classes.default) === 'undefined') {
classes.default = {id:'default'};
classes.default.styles = ['fill:#ffa','stroke:#666','stroke-width:3px'];
//classes.default.styles = ['fill:#ffa','stroke:#666','stroke-width:3px'];
classes.default.styles = [];
classes.default.clusterStyles = ['rx:4px','fill: rgb(255, 255, 222)','rx: 4px','stroke: rgb(170, 170, 51)','stroke-width: 1px'];
classes.default.nodeLabelStyles = ['fill:#000','stroke:none','font-weight:300','font-family:"Helvetica Neue",Helvetica,Arial,sans-serf','font-size:14px'];
classes.default.edgeLabelStyles = ['fill:#000','stroke:none','font-weight:300','font-family:"Helvetica Neue",Helvetica,Arial,sans-serf','font-size:14px'];
@ -38223,7 +38221,7 @@ module.exports.cloneCssStyles = function(svg, classes){
if (classes.hasOwnProperty(className) && typeof(className) != "undefined") {
if (className === 'default') {
if (classes.default.styles instanceof Array) {
defaultStyles += "#" + svg.id.trim() + ' .node' + ' { ' + classes[className].styles.join("; ") + '; }\n';
defaultStyles += "#" + svg.id.trim() + ' .node' + '>rect { ' + classes[className].styles.join("; ") + '; }\n';
}
if (classes.default.nodeLabelStyles instanceof Array) {
defaultStyles += "#" + svg.id.trim() + ' .node text ' + ' { ' + classes[className].nodeLabelStyles.join("; ") + '; }\n';
@ -38236,7 +38234,7 @@ module.exports.cloneCssStyles = function(svg, classes){
}
} else {
if (classes[className].styles instanceof Array) {
embeddedStyles += "#" + svg.id.trim() + ' .' + className + ' { ' + classes[className].styles.join("; ") + '; }\n';
embeddedStyles += "#" + svg.id.trim() + ' .' + className + '>rect { ' + classes[className].styles.join("; ") + '; }\n';
}
}
}

6
dist/mermaid.min.js vendored
View File

File diff suppressed because one or more lines are too long

10
dist/mermaid.slim.js vendored
View File

@ -22981,15 +22981,13 @@ exports.getClasses = function (text, isDot) {
// Parse the graph definition
parser.parse(text);
var classDefStylesObj = {};
var classDefStyleStr = '';
var classes = graph.getClasses();
// Add default class if undefined
if(typeof(classes.default) === 'undefined') {
classes.default = {id:'default'};
classes.default.styles = ['fill:#ffa','stroke:#666','stroke-width:3px'];
//classes.default.styles = ['fill:#ffa','stroke:#666','stroke-width:3px'];
classes.default.styles = [];
classes.default.clusterStyles = ['rx:4px','fill: rgb(255, 255, 222)','rx: 4px','stroke: rgb(170, 170, 51)','stroke-width: 1px'];
classes.default.nodeLabelStyles = ['fill:#000','stroke:none','font-weight:300','font-family:"Helvetica Neue",Helvetica,Arial,sans-serf','font-size:14px'];
classes.default.edgeLabelStyles = ['fill:#000','stroke:none','font-weight:300','font-family:"Helvetica Neue",Helvetica,Arial,sans-serf','font-size:14px'];
@ -29007,7 +29005,7 @@ module.exports.cloneCssStyles = function(svg, classes){
if (classes.hasOwnProperty(className) && typeof(className) != "undefined") {
if (className === 'default') {
if (classes.default.styles instanceof Array) {
defaultStyles += "#" + svg.id.trim() + ' .node' + ' { ' + classes[className].styles.join("; ") + '; }\n';
defaultStyles += "#" + svg.id.trim() + ' .node' + '>rect { ' + classes[className].styles.join("; ") + '; }\n';
}
if (classes.default.nodeLabelStyles instanceof Array) {
defaultStyles += "#" + svg.id.trim() + ' .node text ' + ' { ' + classes[className].nodeLabelStyles.join("; ") + '; }\n';
@ -29020,7 +29018,7 @@ module.exports.cloneCssStyles = function(svg, classes){
}
} else {
if (classes[className].styles instanceof Array) {
embeddedStyles += "#" + svg.id.trim() + ' .' + className + ' { ' + classes[className].styles.join("; ") + '; }\n';
embeddedStyles += "#" + svg.id.trim() + ' .' + className + '>rect { ' + classes[className].styles.join("; ") + '; }\n';
}
}
}

4
dist/mermaid.slim.min.js vendored
View File

File diff suppressed because one or more lines are too long

10
dist/mermaidAPI.js vendored
View File

@ -31864,15 +31864,13 @@ exports.getClasses = function (text, isDot) {
// Parse the graph definition
parser.parse(text);
var classDefStylesObj = {};
var classDefStyleStr = '';
var classes = graph.getClasses();
// Add default class if undefined
if(typeof(classes.default) === 'undefined') {
classes.default = {id:'default'};
classes.default.styles = ['fill:#ffa','stroke:#666','stroke-width:3px'];
//classes.default.styles = ['fill:#ffa','stroke:#666','stroke-width:3px'];
classes.default.styles = [];
classes.default.clusterStyles = ['rx:4px','fill: rgb(255, 255, 222)','rx: 4px','stroke: rgb(170, 170, 51)','stroke-width: 1px'];
classes.default.nodeLabelStyles = ['fill:#000','stroke:none','font-weight:300','font-family:"Helvetica Neue",Helvetica,Arial,sans-serf','font-size:14px'];
classes.default.edgeLabelStyles = ['fill:#000','stroke:none','font-weight:300','font-family:"Helvetica Neue",Helvetica,Arial,sans-serf','font-size:14px'];
@ -37616,7 +37614,7 @@ module.exports.cloneCssStyles = function(svg, classes){
if (classes.hasOwnProperty(className) && typeof(className) != "undefined") {
if (className === 'default') {
if (classes.default.styles instanceof Array) {
defaultStyles += "#" + svg.id.trim() + ' .node' + ' { ' + classes[className].styles.join("; ") + '; }\n';
defaultStyles += "#" + svg.id.trim() + ' .node' + '>rect { ' + classes[className].styles.join("; ") + '; }\n';
}
if (classes.default.nodeLabelStyles instanceof Array) {
defaultStyles += "#" + svg.id.trim() + ' .node text ' + ' { ' + classes[className].nodeLabelStyles.join("; ") + '; }\n';
@ -37629,7 +37627,7 @@ module.exports.cloneCssStyles = function(svg, classes){
}
} else {
if (classes[className].styles instanceof Array) {
embeddedStyles += "#" + svg.id.trim() + ' .' + className + ' { ' + classes[className].styles.join("; ") + '; }\n';
embeddedStyles += "#" + svg.id.trim() + ' .' + className + '>rect { ' + classes[className].styles.join("; ") + '; }\n';
}
}
}

12
dist/mermaidAPI.slim.js vendored
View File

File diff suppressed because one or more lines are too long

4
dist/mermaidAPI.slim.min.js vendored
View File

File diff suppressed because one or more lines are too long

6
dist/www/index.html vendored
View File

@ -90,12 +90,12 @@
<p>Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?</p>
<p>This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript. <a href="http://knsv.github.io/mermaid/live_editor">Try it using our editor</a>.</p>
<p>Code examples below:</p>
<p>###An example of a flowchart</p>
<h3 id="an-example-of-a-flowchart">An example of a flowchart</h3>
<pre class="css"><code>graph TD;
A-->B;
A-->C;
B-->D;
C-->D;</code></pre><p>###An example of a sequence diagram</p>
C-->D;</code></pre><h3 id="an-example-of-a-sequence-diagram">An example of a sequence diagram</h3>
<pre class="css"><code>sequenceDiagram
participant Alice
participant Bob
@ -106,7 +106,7 @@
Note right of John: Rational thoughts &lt;br/>prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!</code></pre><p>###Example code for a gantt diagram</p>
Bob-->John: Jolly good!</code></pre><h3 id="example-code-for-a-gantt-diagram">Example code for a gantt diagram</h3>
<pre class="css"><code>gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid

5
dist/www/javascripts/lib/mermaid.js vendored
View File

@ -32197,9 +32197,6 @@ exports.getClasses = function (text, isDot) {
// Parse the graph definition
parser.parse(text);
var classDefStylesObj = {};
var classDefStyleStr = '';
var classes = graph.getClasses();
// Add default class if undefined
@ -38236,7 +38233,7 @@ module.exports.cloneCssStyles = function(svg, classes){
}
} else {
if (classes[className].styles instanceof Array) {
embeddedStyles += "#" + svg.id.trim() + ' .' + className + ' { ' + classes[className].styles.join("; ") + '; }\n';
embeddedStyles += "#" + svg.id.trim() + ' .' + className + '>rect { ' + classes[className].styles.join("; ") + '; }\n';
}
}
}

2
docs/content/development.md
View File

@ -3,7 +3,7 @@ order: 9
---
# Development
##Updating the documentation
## Updating the documentation
## Getting the development environment up
1. Fork the gh-pages branch in the the mermaid repository

43
docs/content/flowchart.md
View File

@ -2,7 +2,7 @@
order: 3
---
#Flowcharts - Basic Syntax
# Flowcharts - Basic Syntax
## Graph
This statement declares a new graph and the direction of the graph layout.
@ -198,6 +198,19 @@ graph LR;
A == text ==> B
```
## Special characters that break syntax
It is possible to put text within quotes in order to render more troublesome characters. As in the example below:
```
graph LR
d1["This is the (text) in the box"]
```
```mermaid
graph LR
id1["This is the (text) in the box"]
```
## Subgraphs
```
@ -279,7 +292,7 @@ graph LR
```
#### Classes
More convenient then defining the style everytime is to define a class of styles and attach this class to the nodes that
More convenient then defining the style every time is to define a class of styles and attach this class to the nodes that
should have a different look.
a class definition looks like the example below:
@ -299,9 +312,33 @@ It is also possible to attach a class to a list of nodes in one statement:
```
class nodeId1,nodeId2 className;
```
### Css classes
It is also possible to pre dine classes in css styles that can be applied from the graph definition as in the example
below:
**Example style**
```
<style>
.cssClass > rect{
fill:#FF0000;
stroke:#FFFF00;
stroke-width:4px;
}
</style>
```
**Example definition**
```
graph LR;
A-->B[AAA<span>BBB</span>];
B-->D;
class A cssClass;
```
<aside class="warning">Class definitions in the graph defnition is broken in version 0.5.1 but has been fixed in the master branch of mermaid. This fix will be included in 0.5.2</aside>
#### Default class
### Default class
If a class is named default it will be assigned to all classes without specific class definitions.

6
docs/content/index.md
View File

@ -16,7 +16,7 @@ This is why mermaid was born, a simple markdown-like script language for generat
Code examples below:
###An example of a flowchart
### An example of a flowchart
```
graph TD;
A-->B;
@ -25,7 +25,7 @@ graph TD;
C-->D;
```
###An example of a sequence diagram
### An example of a sequence diagram
```
sequenceDiagram
participant Alice
@ -40,7 +40,7 @@ sequenceDiagram
Bob-->John: Jolly good!
```
###Example code for a gantt diagram
### Example code for a gantt diagram
```
gantt
dateFormat YYYY-MM-DD

4
docs/content/upgrading.md
View File

@ -2,11 +2,11 @@
order: 10
---
#Upgrading to from version -0.4.0
# Upgrading to from version -0.4.0
Some of the interfaces has been upgraded.
##Initialization
## Initialization
mermaid_config is no longer used. Instead a call to mermaid initialize is done as in the example below:

24
docs/content/usage.md
View File

@ -2,8 +2,8 @@
title: Usage
order: 1
---
#Usage
##Installation
# Usage
## Installation
Either use the npm or bower package managers as per below:
@ -36,7 +36,7 @@ There are some bundles to choose from:
Read more about that at [https://rawgit.com/](https://rawgit.com/)
##Simple usage on a web page
## Simple usage on a web page
The easiest way to integrate mermaid on a web page requires two elements:
1. Inclusion of the mermaid framework in the html page using a script tag
@ -45,7 +45,7 @@ The easiest way to integrate mermaid on a web page requires two elements:
If these things are in place mermaid listens to the page load event and when fires, when the page has loaded, it will
locate the graphs n the page and transform them to svg files.
###Include mermaid on your web page:
### Include mermaid on your web page:
```
&lt;script src=&quot;mermaid.min.js&quot;&gt;&lt;/script&gt;
@ -57,7 +57,7 @@ Further down on your page mermaid will look for tags with ```class="mermaid"```.
read the chart definiton which will be replaced with the svg chart.
###Define a chart like this:
### Define a chart like this:
```
&lt;div class=&quot;mermaid&quot;&gt;
@ -98,7 +98,7 @@ mermaid.init(undefined, $("#someId .yetAnotherClass"));
<aside class="warning">This type of integration is deprecated instead the preferred way of handling more complex integration is to us the mermaidAPI instead.</aside>
##Usage with browserify
## Usage with browserify
The reader is assumed to know about CommonJS style of module handling and how to use browserify. If not a good place
to start would be http://browserify.org/ website.
@ -130,7 +130,7 @@ Us the created bundle on a web page as per example below:
&lt;/html&gt;
```
##API usage
## API usage
The main idea with the API is to be able to call a render function with graph defintion as a string. The render function
will render the graph and call a callback with the resulting svg code. With this approach it is up to the site creator to
fetch the graph definition from the site, perhaps from a textarea, render it and place the graph somewhere in the site.
@ -239,7 +239,7 @@ var textFieldUpdated = function(){
bindEventHandler('change', 'code', textFieldUpdated);
```
#Configuration
# Configuration
Mermaid takes a number of options which lets you tweak the rendering of the diagrams. Currently there are three ways of
setting the options in mermaid.
@ -251,7 +251,7 @@ setting the options in mermaid.
The list above has two ways to many of doing this. Three are deprecated and will eventually be removed. The list of
configuration objects are described [in the mermaidAPI documentation](http://knsv.github.io/mermaid/index.html#configuration28).
##Using the mermaidAPI.initialize/mermaid.initialize call
## Using the mermaidAPI.initialize/mermaid.initialize call
The future proof way of setting the configuration is by using the initialization call to mermaid or mermaidAPi depending
on what kind of integration you use.
@ -273,7 +273,7 @@ on what kind of integration you use.
<aside class="success">This is the preferred way of configuring mermaid.</aside>
##Using the mermaid object
## Using the mermaid object
Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
approach are:
@ -287,7 +287,7 @@ mermaid.startOnLoad = true;
<aside class="info">This way of setting the configuration is deprecated instead the preferred way of is to use the initialize method. This functionality is only kept for not breaking existing integrations</aside>
##Using the mermaid_config
## Using the mermaid_config
Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
approach are:
@ -301,7 +301,7 @@ mermaid_config.startOnLoad = true;
<aside class="info">This way of setting the configuration is deprecated instead the preferred way of is to use the initialize method. This functionality is only kept for not breaking existing integrations</aside>
##Using the mermaid.init call
## Using the mermaid.init call
Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
approach are:

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

@ -210,15 +210,13 @@ exports.getClasses = function (text, isDot) {
// Parse the graph definition
parser.parse(text);
var classDefStylesObj = {};
var classDefStyleStr = '';
var classes = graph.getClasses();
// Add default class if undefined
if(typeof(classes.default) === 'undefined') {
classes.default = {id:'default'};
classes.default.styles = ['fill:#ffa','stroke:#666','stroke-width:3px'];
//classes.default.styles = ['fill:#ffa','stroke:#666','stroke-width:3px'];
classes.default.styles = [];
classes.default.clusterStyles = ['rx:4px','fill: rgb(255, 255, 222)','rx: 4px','stroke: rgb(170, 170, 51)','stroke-width: 1px'];
classes.default.nodeLabelStyles = ['fill:#000','stroke:none','font-weight:300','font-family:"Helvetica Neue",Helvetica,Arial,sans-serf','font-size:14px'];
classes.default.edgeLabelStyles = ['fill:#000','stroke:none','font-weight:300','font-family:"Helvetica Neue",Helvetica,Arial,sans-serf','font-size:14px'];

4
src/utils.js
View File

@ -100,7 +100,7 @@ module.exports.cloneCssStyles = function(svg, classes){
if (classes.hasOwnProperty(className) && typeof(className) != "undefined") {
if (className === 'default') {
if (classes.default.styles instanceof Array) {
defaultStyles += "#" + svg.id.trim() + ' .node' + ' { ' + classes[className].styles.join("; ") + '; }\n';
defaultStyles += "#" + svg.id.trim() + ' .node' + '>rect { ' + classes[className].styles.join("; ") + '; }\n';
}
if (classes.default.nodeLabelStyles instanceof Array) {
defaultStyles += "#" + svg.id.trim() + ' .node text ' + ' { ' + classes[className].nodeLabelStyles.join("; ") + '; }\n';
@ -113,7 +113,7 @@ module.exports.cloneCssStyles = function(svg, classes){
}
} else {
if (classes[className].styles instanceof Array) {
embeddedStyles += "#" + svg.id.trim() + ' .' + className + ' { ' + classes[className].styles.join("; ") + '; }\n';
embeddedStyles += "#" + svg.id.trim() + ' .' + className + '>rect { ' + classes[className].styles.join("; ") + '; }\n';
}
}
}

52
test/examples/cssClasses.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../dist/mermaid.css"/>
<script src="../../dist/mermaid.js"></script>
<style>
.cluster {
fill: #fcac93;
rx:4px;
stroke: grey;
}
.cssClass > rect{
fill:#FF0000;
stroke:#FFFF00;
stroke-width:4px;
}
</style>
<link rel="stylesheet" href="../../dist/mermaid.forest.css"/>
</head>
<body>
<h1>Css classes</h1>
A should have a red background with styling from class.
<div class="mermaid" id="i211">
graph LR;
A-->B[AAA<span>BBB</span>];
B-->D;
class A cssClass;
</div>
A should have a red background with styling from style definition.
<div class="mermaid" id="i212">
graph LR;
A-->B[AAA<span>BBB</span>];
B-->D;
style A fill:#FF0000,stroke:#FFFF00,stroke-width:4px;
</div>
A should have orange background with styling from local class definition definition.
<div class="mermaid" id="i213">
graph LR;
A-->B[AAA<span>BBB</span>];
B-->D;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class A orange;
linkStyle 0 stroke:#ff3,stroke-width:4px;
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
</div>
</body>
</html>

47
test/examples/issue_210.html Normal file
View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../../dist/mermaid.js"></script>
<script>
var config = {
startOnLoad:true,
callback:function(id){
console.log(id,' rendered');
},
flowchart:{
useMaxWidth:true,
htmlLabels:true
}
};
mermaid.initialize(config);
</script>
<script>
function coolAction(){
console.log('Got callback in user defined function');
}
</script>
<style>
.cluster {
fill: #fcac93;
rx:4px;
stroke: grey;
}
</style>
<link rel="stylesheet" href="../../dist/mermaid.forest.css"/>
</head>
<body>
<h1>Issue 211</h1>
A should have a red background.
<div class="mermaid" id="i211">
graph LR;
A-->B[AAA<span>BBB</span>];
B-->D;
classDef test fill:#FF0000,stroke:#FFFF00,stroke-width:4px;
class A test;
</div>
</body>
</html>

24
test/index.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="nav.js"></script>
</head>
<body style="height:1000px" ng-app="navApp">
<div ng-controller="NavAppCtrl">
<ul style="width:4%;float:left;" >
<li ng-repeat="item in items"><a ng-click="go(item.url)">{{item.name}}</a></li>
</ul>
<iframe src="{{frameUrl}}" style="float:right;width:90%;height:1000px;"></iframe>
</div>
</body>
</html>

19
test/nav.js Normal file
View File

@ -0,0 +1,19 @@
/**
* Created by knut on 2015-09-15.
*/
var navApp = angular.module('navApp', []);
navApp.controller('NavAppCtrl', function ($scope) {
$scope.items = [
{'name': 'Ett',
'url': 'cases/ett.html'},
{'name': 'Two',
'url': 'cases/two.html'}
];
$scope.frameUrl = "web.html"
$scope.go = function(url){
alert(url);
}
});