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

Merge branch 'release/8.4.0'

This commit is contained in:
knsv 2019-10-19 07:59:04 -07:00
parent dd68a7151f d366605d91
commit 0157f665a3
16 changed files with 249 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
.github/workflows/release-preview-publish.yml vendored Normal file
View File

@ -0,0 +1,40 @@
name: Publish release preview package
on:
push:
branches:
- 'release/**'
jobs:
publish:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [10.x]
steps:
- uses: actions/checkout@v1
- name: Setup Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- name: Install Yarn
run: npm i yarn --global
- name: Install Json
run: npm i json --global
- name: Install Packages
run: yarn install
- name: Publish
run: |
PREVIEW_VERSION=$(git rev-list --count --first-parent HEAD)
VERSION=$(echo ${{github.ref}} | tail -c +20)-preview.$PREVIEW_VERSION
echo $VERSION
npm version --no-git-tag-version --allow-same-version $VERSION
npm set //npm.pkg.github.com/:_authToken ${{ secrets.GITHUB_TOKEN }}
npm set registry https://npm.pkg.github.com/knsv
json -I -f package.json -e 'this.name="@knsv/mermaid"' # Package name needs to be set to a scoped one because GitHub registry requires this
json -I -f package.json -e 'this.repository="git://github.com/knsv/mermaid"' # Repo url needs to have a specific format too
npm publish

14
README.md
View File

@ -144,6 +144,20 @@ Example: https://unpkg.com/mermaid@7.1.0/dist/
yarn add mermaid
### Preview builds
Preview builds are created automatically for each release. They can be found in the [GitHub registry](https://github.com/knsv/mermaid/packages).
Make sure to configure npm to use the GitHub package registry. Steps for that can be found [here](https://help.github.com/en/articles/configuring-npm-for-use-with-github-package-registry).
If you want to get the latest preview for the next release
```
yarn add @knsv/mermaid
```
If you want to get the latest preview for a specific version
```
yarn add @knsv/mermaid@<version>
```
## Documentation

16
cypress/integration/other/rerender.spec.js Normal file
View File

@ -0,0 +1,16 @@
/* eslint-env jest */
describe('Rerendering', () => {
it('should be able to render and rerender a graph via API', () => {
const url = 'http://localhost:9000/rerender.html';
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('#graph #A').should('have.text', 'XMas');
cy.get('body')
.find('#rerender')
.click({ force: true });
cy.get('#graph #A').should('have.text', 'Saturday');
});
});

33
cypress/platform/rerender.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
</head>
<body>
<div id="graph">
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.init({ startOnLoad: false });
mermaid.mermaidAPI.initialize();
rerender('XMas');
function rerender(text) {
var graphText = `graph TD
A[${text}] -->|Get money| B(Go shopping)`
var graph = mermaid.mermaidAPI.render('id', graphText);
console.log('\x1b[35m%s\x1b[0m', '>> graph', graph)
document.getElementById('graph').innerHTML=graph;
}
</script>
<button id="rerender" onclick="rerender('Saturday')">Rerender</button>
</body>
</html>

1
docs/_sidebar.md
View File

@ -11,6 +11,7 @@
- [Flowchart](flowchart.md)
- [Sequence diagram](sequenceDiagram.md)
- [Class Diagram](classDiagram.md)
- [State Diagram](stateDiagram.md)
- [Gantt](gantt.md)
- [Pie Chart](pie.md)
- Guide

2
docs/index.html
View File

@ -7,7 +7,7 @@
<meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
<script src="//cdn.jsdelivr.net/npm/mermaid@8.3.1/dist/mermaid.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/mermaid@8.4.0/dist/mermaid.min.js"></script>
<!-- <script src="//localhost:9000/mermaid.js"></script> -->
<style>
.markdown-section {

106
docs/stateDiagram.md
View File

@ -1,8 +1,9 @@
# State diagrams
> A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the case, while at other times this is a reasonable abstraction.
> "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the case, while at other times this is a reasonable abstraction." Wikipedia
Mermaid can render state diagrams with a syntax derived from plantUml, this to make the diagrams easier to use.
Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to
share diagrams between mermaid and plantUml.
```
stateDiagram
@ -24,6 +25,7 @@ stateDiagram
Moving --> Crash
Crash --> [*]
```
In state diagrams systems are described in terms of its states and how the systems state can change to another state via a transitions. The example diagram above shows three states **Still**, **Moving** and **Crash**. You start in the state of Still. From Still you can change the state to Moving. In Moving you can change the state either back to Still or to Crash. There is no transition from Still to Crash.
## States
@ -38,7 +40,7 @@ stateDiagram
s1
```
Another way is by using the state key word as per below:
Another way is by using the state keyword with a description as per below:
```
stateDiagram
state "This ia state decription" as s2
@ -48,11 +50,23 @@ stateDiagram
state "This ia state decription" as s2
```
Another way to define a state with a description is to define the state id followed by a colon and the description:
```
stateDiagram
s2 : This ia state decription
```
```mermaid
stateDiagram
s2 : This ia state decription
```
## Transitions
Transitions are path/edges when one state passes into another. This is represented using text arrow, "-->".
Transitions from and to states that are not defined implicitly defines these states.
When you define a transition between two states and the states are not already defined the undefined states are defined with the id
from the transition. You can later add descriptions to states defined this way.
```
stateDiagram
@ -63,7 +77,7 @@ stateDiagram
s1 --> s2
```
It is possieblt to add text to a transition.
It is possible to add text to a transition. To describe what it represents.
```
stateDiagram
@ -74,7 +88,9 @@ stateDiagram
s1 --> s2: A transition
```
There are two special states indicating the start of the diagram and the stop of the diagram. These are written with the [*] syntax.
## Start and end
There are two special states indicating the start and stop of the diagram. These are written with the [*] syntax and the direction of the transition to it defines it either as a start or a stop state.
```
stateDiagram
@ -90,9 +106,10 @@ stateDiagram
## Composit states
In a real world use of state diagrams you often end up with diagrams that are multi-dimensional as one state can have several internal states.
In a real world use of state diagrams you often end up with diagrams that are multi-dimensional as one state can
have several internal states. These are called composit states in this terminology.
In order to define a composit state you need to use the state keyword as per below:
In order to define a composit state you need to use the state keyword followed by and id and the body of the composit state between {}. See the example below:
```
stateDiagram
@ -113,6 +130,44 @@ stateDiagram
You can do this in several layers:
```
stateDiagram
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
```
```mermaid
stateDiagram
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
```
You can also define transitions also between composit states:
```
stateDiagram
[*] --> First
@ -150,9 +205,10 @@ stateDiagram
[*] --> thi
thi --> [*]
}
```
*You can not define transitions between internal states belonging to different composit states*
## Forks
It is possible to specify a fork in the diagram using &lt;&lt;fork&gt;&gt; &lt;&lt;join&gt;&gt;.
@ -187,9 +243,9 @@ It is possible to specify a fork in the diagram using &lt;&lt;fork&gt;&gt; &lt;&
## Notes
Sometimes nothing says it better then a postit note. That is also the case in state diagrams.
Sometimes nothing says it better then a Post-it note. That is also the case in state diagrams.
Here you can't choose to put the onte to the right or to the left of a node.
Here you can choose to put the note to the *right of* or to the *left of* a node.
```
stateDiagram
@ -257,30 +313,4 @@ As in plantUml you can specify concurrency using the -- symbol.
## Styling
Styling of the a sequence diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/sequence.scss
### Classes used (TB Written)
Class | Description
--- | ---
Fakenote | Styles for the note box.
FakenoteText | Styles for the text on in the note boxes.
## Configuration
Is it possible to adjust the margins etc for the stateDiagram ... TB written
```javascript
mermaid.stateConfig = {
};
```
### Possible configuration params:
Param | Description | Default value
--- | --- | ---
TBS | Turns on/off the rendering of actors below the diagram as well as above it | false
Styling of the a state diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/state.scss

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "mermaid",
"version": "8.3.1",
"version": "8.4.0",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"main": "dist/mermaid.core.js",
"keywords": [

7
src/diagrams/class/classDb.js
View File

@ -80,9 +80,10 @@ export const addMember = function(className, member) {
}
};
export const addMembers = function(className, MembersArr) {
if (Array.isArray(MembersArr)) {
MembersArr.forEach(member => addMember(className, member));
export const addMembers = function(className, members) {
if (Array.isArray(members)) {
members.reverse();
members.forEach(member => addMember(className, member));
}
};

20
src/diagrams/class/classDiagram.spec.js
View File

@ -262,5 +262,25 @@ describe('class diagram, ', function() {
expect(testClass.methods.length).toBe(1);
expect(testClass.annotations[0]).toBe('interface');
});
it('should add bracket members in right order', function() {
const str =
'classDiagram\n' +
'class Class1 {\n' +
'int : test\n' +
'string : foo\n' +
'test()\n' +
'foo()\n' +
'}';
parser.parse(str);
const testClass = parser.yy.getClass('Class1');
expect(testClass.members.length).toBe(2);
expect(testClass.methods.length).toBe(2);
expect(testClass.members[0]).toBe('int : test');
expect(testClass.members[1]).toBe('string : foo');
expect(testClass.methods[0]).toBe('test()');
expect(testClass.methods[1]).toBe('foo()');
});
});
});

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

@ -36,9 +36,10 @@ export const addVertices = function(vert, g, svgId) {
}
}
} else {
// create the style definition for the text, if property is a text-property
for (let i = 0; i < arr.length; i++) {
if (typeof arr[i] !== 'undefined') {
if (arr[i].match('^color:')) styleStr = styleStr + arr[i] + ';';
if (arr[i].match('^color:|^text-align:')) styleStr = styleStr + arr[i] + ';';
}
}
}

39
src/diagrams/flowchart/flowRenderer.spec.js
View File

@ -54,4 +54,43 @@ describe('the flowchart renderer', function() {
});
});
});
[
[['fill:#fff'], 'fill:#fff;', ''],
[['color:#ccc'], 'color:#ccc;', 'color:#ccc;'],
[['fill:#fff', 'color:#ccc'], 'fill:#fff;color:#ccc;', 'color:#ccc;'],
[
['fill:#fff', 'color:#ccc', 'text-align:center'],
'fill:#fff;color:#ccc;text-align:center;',
'color:#ccc;text-align:center;'
]
].forEach(function([style, expectedStyle, expectedLabelStyle]) {
it(`should add the styles to style and/or labelStyle for style ${style}`, function() {
const addedNodes = [];
const mockG = {
setNode: function(id, object) {
addedNodes.push([id, object]);
}
};
addVertices(
{
v1: {
type: 'rect',
id: 'my-node-id',
classes: [],
styles: style,
text: 'my vertex text'
}
},
mockG,
'svg-id'
);
expect(addedNodes).toHaveLength(1);
expect(addedNodes[0][0]).toEqual('my-node-id');
expect(addedNodes[0][1]).toHaveProperty('id', 'my-node-id');
expect(addedNodes[0][1]).toHaveProperty('labelType', 'svg');
expect(addedNodes[0][1]).toHaveProperty('style', expectedStyle);
expect(addedNodes[0][1]).toHaveProperty('labelStyle', expectedLabelStyle);
});
});
});

2
src/diagrams/state/stateRenderer.js
View File

@ -101,7 +101,7 @@ export const draw = function(text, id) {
`${conf.padding * -1} ${conf.padding * -1} ` +
(bounds.width * 1.5 + conf.padding * 2) +
' ' +
(bounds.height * 1.5 + conf.padding * 2)
(bounds.height + conf.padding * 5)
);
};
const getLabelWidth = text => {

4
src/mermaidAPI.js
View File

@ -463,6 +463,10 @@ const render = function(id, txt, cb, container) {
.attr('xmlns', 'http://www.w3.org/2000/svg')
.append('g');
} else {
const existingSvg = document.getElementById(id);
if (existingSvg) {
existingSvg.remove();
}
const element = document.querySelector('#' + 'd' + id);
if (element) {
element.innerHTML = '';

4
src/themes/gantt.scss
View File

@ -86,10 +86,12 @@
.taskText {
text-anchor: middle;
font-size: 11px;
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
}
.taskText:not([font-size]) {
font-size: 11px;
}
.taskTextOutsideRight {

2
src/themes/state.scss
View File

@ -59,4 +59,6 @@ g.stateGroup line {
fill: $labelColor;
font-size: 10px;
font-weight: bold;
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
}