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

Merge branch 'develop'

This commit is contained in:
Knut Sveidqvist 2019-12-01 13:36:04 +01:00
parent e99d872f2b 823c95bd9c
commit 32b60edda7
20 changed files with 352 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.github/pr-labeler.yml vendored Normal file
View File

@ -0,0 +1,3 @@
'Type: Bug / Error': 'bug/*'
'Type: Enhancement': 'feature/*'
'Type: Other': 'other/*'

19
.github/release-drafter.yml vendored Normal file
View File

@ -0,0 +1,19 @@
name-template: '$NEXT_PATCH_VERSION'
tag-template: '$NEXT_PATCH_VERSION'
categories:
- title: '🚀 Features'
labels:
- 'Type: Enhancement'
- title: '🐛 Bug Fixes'
labels:
- 'Type: Bug / Error'
- title: '🧰 Maintenance'
label: 'Type: Other'
change-template: '- $TITLE (#$NUMBER) @$AUTHOR'
no-changes-template: 'This release contains minor changes and bugfixes.'
template: |
# Release Notes
$CHANGES
🎉 **Thanks to all contributors helping with this release!** 🎉

13
.github/workflows/pr-labeler.yml vendored Normal file
View File

@ -0,0 +1,13 @@
name: Apply labels to PR
on:
pull_request:
types: [opened]
jobs:
pr-labeler:
runs-on: ubuntu-latest
steps:
- name: Label PR
uses: TimonVS/pr-labeler-action@v3
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

15
.github/workflows/release-draft.yml vendored Normal file
View File

@ -0,0 +1,15 @@
name: Draft Release
on:
push:
branches:
- develop
jobs:
draft-release:
runs-on: ubuntu-latest
steps:
- name: Draft Release
uses: toolmantim/release-drafter@v5.2.0
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

9
.github/workflows/release-preview-publish.yml vendored
View File

@ -8,15 +8,12 @@ on:
jobs:
publish:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [10.x]
steps:
- uses: actions/checkout@v1
- name: Setup Node.js ${{ matrix.node-version }}
- name: Setup Node.js
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
node-version: 10.x
- name: Install Yarn
run: npm i yarn --global
@ -24,7 +21,7 @@ jobs:
run: npm i json --global
- name: Install Packages
run: yarn install
run: yarn install --frozen-lockfile
- name: Publish
run: |

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

@ -0,0 +1,46 @@
name: Publish release
on:
release:
types: [published]
jobs:
publish:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- uses: fregante/setup-git-token@v1
with:
token: ${{ secrets.GITHUB_TOKEN }}
- name: Setup Node.js
uses: actions/setup-node@v1
with:
node-version: 10.x
- name: Install Yarn
run: npm i yarn --global
- name: Install Json
run: npm i json --global
- name: Install Packages
run: yarn install --frozen-lockfile
- name: Prepare release
run: |
VERSION=${GITHUB_REF:10}
echo "Preparing release $VERSION"
git checkout -t origin/release/$VERSION
npm version --no-git-tag-version --allow-same-version $VERSION
git add package.json
git commit -m "Bump version $VERSION"
git checkout -t origin/master
git merge -m "Release $VERSION" --no-ff release/$VERSION
git push --no-verify
- name: Publish
run: |
npm set //registry.npmjs.org/:_authToken $NPM_TOKEN
npm publish
env:
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

8
.vscode/settings.json vendored
View File

@ -1,8 +0,0 @@
{
"typescript.format.enable": false,
"typescript.reportStyleChecksAsWarnings": false,
"typescript.validate.enable": false,
"javascript.validate.enable": false,
"editor.formatOnSave": false,
"editor.snippetSuggestions": "top"
}

4
babel.config.js
View File

@ -3,9 +3,7 @@ module.exports = {
[
'@babel/preset-env',
{
targets: {
node: 'current'
}
targets: "defaults, ie >= 11, current node"
}
]
]

35
cypress/integration/rendering/classDiagram.spec.js
View File

@ -2,7 +2,7 @@
import { imgSnapshotTest } from '../../helpers/util';
describe('Class diagram', () => {
it('should render a simple class diagram', () => {
it('1: should render a simple class diagram', () => {
imgSnapshotTest(
`
classDiagram
@ -33,7 +33,8 @@ describe('Class diagram', () => {
);
cy.get('svg');
});
it('should render a simple class diagrams with cardinality', () => {
it('2: should render a simple class diagrams with cardinality', () => {
imgSnapshotTest(
`
classDiagram
@ -132,4 +133,34 @@ describe('Class diagram', () => {
);
cy.get('svg');
});
it('4: should render a simple class diagram with comments', () => {
imgSnapshotTest(
`
classDiagram
%% this is a comment
Class01 <|-- AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
class Class10 {
&lt;&lt;service&gt;&gt;
int id
test()
}
`,
{}
);
cy.get('svg');
});
});

23
cypress/integration/rendering/flowchart.spec.js
View File

@ -14,6 +14,7 @@ describe('Flowcart', () => {
{ flowchart: { htmlLabels: false } }
);
});
it('2: should render a simple flowchart with htmlLabels', () => {
imgSnapshotTest(
`graph TD
@ -26,6 +27,7 @@ describe('Flowcart', () => {
{ flowchart: { htmlLabels: true } }
);
});
it('3: should render a simple flowchart with line breaks', () => {
imgSnapshotTest(
`
@ -99,6 +101,7 @@ describe('Flowcart', () => {
{}
);
});
it('6: should render a flowchart full of icons', () => {
imgSnapshotTest(
`
@ -178,6 +181,7 @@ describe('Flowcart', () => {
{}
);
});
it('8: should render subgraphs', () => {
imgSnapshotTest(
`
@ -190,7 +194,7 @@ describe('Flowcart', () => {
);
});
it('9: should render subgraphs with a title startign with a digit', () => {
it('9: should render subgraphs with a title starting with a digit', () => {
imgSnapshotTest(
`
graph TB
@ -237,7 +241,7 @@ describe('Flowcart', () => {
);
});
it('11: should render a flowchart with ling sames and class definitoins', () => {
it('11: should render a flowchart with long names and class definitions', () => {
imgSnapshotTest(
`graph LR
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
@ -356,6 +360,7 @@ describe('Flowcart', () => {
}
);
});
it('13: should render hexagons', () => {
imgSnapshotTest(
`
@ -377,4 +382,18 @@ describe('Flowcart', () => {
}
);
});
it('14: should render a simple flowchart with comments', () => {
imgSnapshotTest(
`graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
%% this is a comment
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
{ flowchart: { htmlLabels: false } }
);
});
});

13
docs/classDiagram.md
View File

@ -322,7 +322,20 @@ class Color{
}
```
## Comments
Comments can be entered within a class diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any class diagram syntax
```
classDiagram
%% This whole line is a comment classDiagram class Shape <<interface>>
class Shape{
<<interface>>
noOfVertices
draw()
}
```
## Styling

10
docs/flowchart.md
View File

@ -424,6 +424,16 @@ Beginners tip, a full example using interactive links in a html context:
</body>
```
### Comments
Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax
```
graph LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
```
## Styling and classes
### Styling links

17
docs/gantt.md
View File

@ -173,6 +173,23 @@ More info in: http://momentjs.com/docs/#/parsing/string-format/
More info in: https://github.com/mbostock/d3/wiki/Time-Formatting
## Comments
Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
```
gantt
title A Gantt Diagram
%% this is a comment
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
```
## Styling

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.4.1/dist/mermaid.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/mermaid@8.4.3/dist/mermaid.min.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

9
docs/sequenceDiagram.md
View File

@ -271,7 +271,16 @@ sequenceDiagram
```
## Comments
Comments can be entered within a sequence diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
```
sequenceDiagram
Alice->>John: Hello John, how are you?
%% this is a comment
John-->>Alice: Great!
```
## Styling

15
docs/stateDiagram.md
View File

@ -322,6 +322,21 @@ As in plantUml you can specify concurrency using the -- symbol.
}
```
## Comments
Comments can be entered within a state diagram chart, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
```
stateDiagram
[*] --> Still
Still --> [*]
%% this is a comment
Still --> Moving
Moving --> Still %% another comment
Moving --> Crash
Crash --> [*]
```
## Styling
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

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

@ -2,13 +2,13 @@
import { parser } from './parser/classDiagram';
import classDb from './classDb';
describe('class diagram, ', function() {
describe('when parsing an info graph it', function() {
beforeEach(function() {
describe('class diagram, ', function () {
describe('when parsing an info graph it', function () {
beforeEach(function () {
parser.yy = classDb;
});
it('should handle relation definitions', function() {
it('should handle relation definitions', function () {
const str =
'classDiagram\n' +
'Class01 <|-- Class02\n' +
@ -19,7 +19,8 @@ describe('class diagram, ', function() {
parser.parse(str);
});
it('should handle relation definition of different types and directions', function() {
it('should handle relation definition of different types and directions', function () {
const str =
'classDiagram\n' +
'Class11 <|.. Class12\n' +
@ -31,7 +32,7 @@ describe('class diagram, ', function() {
parser.parse(str);
});
it('should handle cardinality and labels', function() {
it('should handle cardinality and labels', function () {
const str =
'classDiagram\n' +
'Class01 "1" *-- "many" Class02 : contains\n' +
@ -66,7 +67,7 @@ describe('class diagram, ', function() {
parser.parse(str);
});
it('should handle method statements', function() {
it('should handle method statements', function () {
const str =
'classDiagram\n' +
'Object <|-- ArrayList\n' +
@ -76,7 +77,8 @@ describe('class diagram, ', function() {
parser.parse(str);
});
it('should handle parsing of method statements grouped by brackets', function() {
it('should handle parsing of method statements grouped by brackets', function () {
const str =
'classDiagram\n' +
'class Dummy_Class {\n' +
@ -92,7 +94,7 @@ describe('class diagram, ', function() {
parser.parse(str);
});
it('should handle parsing of separators', function() {
it('should handle parsing of separators', function () {
const str =
'classDiagram\n' +
'class Foo1 {\n' +
@ -124,14 +126,111 @@ describe('class diagram, ', function() {
parser.parse(str);
});
it('should handle a comment', function () {
const str =
'classDiagram\n' +
'class Class1 {\n' +
'%% Comment\n' +
'int : test\n' +
'string : foo\n' +
'test()\n' +
'foo()\n' +
'}';
parser.parse(str);
});
it('should handle comments at the start', function () {
const str =
'%% Comment\n' +
'classDiagram\n' +
'class Class1 {\n' +
'int : test\n' +
'string : foo\n' +
'test()\n' +
'foo()\n' +
'}';
parser.parse(str);
});
it('should handle comments at the end', function () {
const str =
'classDiagram\n' +
'class Class1 {\n' +
'int : test\n' +
'string : foo\n' +
'test()\n' +
'foo()\n' +
'\n}' +
'%% Comment\n';
parser.parse(str);
});
it('should handle comments at the end no trailing newline', function () {
const str =
'classDiagram\n' +
'class Class1 {\n' +
'int : test\n' +
'string : foo\n' +
'test()\n' +
'foo()\n' +
'}\n' +
'%% Comment';
parser.parse(str);
});
it('should handle a comment with multiple line feeds', function () {
const str =
'classDiagram\n\n\n' +
'%% Comment\n\n' +
'class Class1 {\n' +
'int : test\n' +
'string : foo\n' +
'test()\n' +
'foo()\n' +
'}';
parser.parse(str);
});
it('should handle a comment with mermaid class diagram code in them', function () {
const str =
'classDiagram\n' +
'%% Comment Class01 <|-- Class02\n' +
'class Class1 {\n' +
'int : test\n' +
'string : foo\n' +
'test()\n' +
'foo()\n' +
'}';
parser.parse(str);
});
it('should handle a comment inside brackets', function () {
const str =
'classDiagram\n' +
'class Class1 {\n' +
'%% Comment Class01 <|-- Class02\n' +
'int : test\n' +
'string : foo\n' +
'test()\n' +
'foo()\n' +
'}';
parser.parse(str);
});
});
describe('when fetching data from an classDiagram graph it', function() {
beforeEach(function() {
describe('when fetching data from a classDiagram graph it', function () {
beforeEach(function () {
parser.yy = classDb;
parser.yy.clear();
});
it('should handle relation definitions EXTENSION', function() {
it('should handle relation definitions EXTENSION', function () {
const str = 'classDiagram\n' + 'Class01 <|-- Class02';
parser.parse(str);
@ -144,7 +243,8 @@ describe('class diagram, ', function() {
expect(relations[0].relation.type2).toBe('none');
expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE);
});
it('should handle relation definitions AGGREGATION and dotted line', function() {
it('should handle relation definitions AGGREGATION and dotted line', function () {
const str = 'classDiagram\n' + 'Class01 o.. Class02';
parser.parse(str);
@ -157,7 +257,8 @@ describe('class diagram, ', function() {
expect(relations[0].relation.type2).toBe('none');
expect(relations[0].relation.lineType).toBe(classDb.lineType.DOTTED_LINE);
});
it('should handle relation definitions COMPOSITION on both sides', function() {
it('should handle relation definitions COMPOSITION on both sides', function () {
const str = 'classDiagram\n' + 'Class01 *--* Class02';
parser.parse(str);
@ -170,7 +271,8 @@ describe('class diagram, ', function() {
expect(relations[0].relation.type2).toBe(classDb.relationType.COMPOSITION);
expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE);
});
it('should handle relation definitions no types', function() {
it('should handle relation definitions no types', function () {
const str = 'classDiagram\n' + 'Class01 -- Class02';
parser.parse(str);
@ -183,7 +285,8 @@ describe('class diagram, ', function() {
expect(relations[0].relation.type2).toBe('none');
expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE);
});
it('should handle relation definitions with type only on right side', function() {
it('should handle relation definitions with type only on right side', function () {
const str = 'classDiagram\n' + 'Class01 --|> Class02';
parser.parse(str);
@ -197,7 +300,7 @@ describe('class diagram, ', function() {
expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE);
});
it('should handle multiple classes and relation definitions', function() {
it('should handle multiple classes and relation definitions', function () {
const str =
'classDiagram\n' +
'Class01 <|-- Class02\n' +
@ -223,7 +326,7 @@ describe('class diagram, ', function() {
expect(relations[3].relation.lineType).toBe(classDb.lineType.DOTTED_LINE);
});
it('should handle class annotations', function() {
it('should handle class annotations', function () {
const str = 'classDiagram\n' + 'class Class1\n' + '<<interface>> Class1';
parser.parse(str);
@ -234,7 +337,7 @@ describe('class diagram, ', function() {
expect(testClass.annotations[0]).toBe('interface');
});
it('should handle class annotations with members and methods', function() {
it('should handle class annotations with members and methods', function () {
const str =
'classDiagram\n' +
'class Class1\n' +
@ -250,7 +353,7 @@ describe('class diagram, ', function() {
expect(testClass.annotations[0]).toBe('interface');
});
it('should handle class annotations in brackets', function() {
it('should handle class annotations in brackets', function () {
const str = 'classDiagram\n' + 'class Class1 {\n' + '<<interface>>\n' + '}';
parser.parse(str);
@ -261,7 +364,7 @@ describe('class diagram, ', function() {
expect(testClass.annotations[0]).toBe('interface');
});
it('should handle class annotations in brackets with members and methods', function() {
it('should handle class annotations in brackets with members and methods', function () {
const str =
'classDiagram\n' +
'class Class1 {\n' +
@ -278,7 +381,7 @@ describe('class diagram, ', function() {
expect(testClass.annotations[0]).toBe('interface');
});
it('should add bracket members in right order', function() {
it('should add bracket members in right order', function () {
const str =
'classDiagram\n' +
'class Class1 {\n' +

2
src/diagrams/class/parser/classDiagram.jison
View File

@ -9,7 +9,7 @@
%x string struct
%%
\%\%[^\n]* /* do nothing */
\%\%[^\n]*\n* /* do nothing */
\n+ return 'NEWLINE';
\s+ /* skip whitespace */
"classDiagram" return 'CLASS_DIAGRAM';

12
src/diagrams/flowchart/parser/flow-comments.spec.js
View File

@ -12,8 +12,8 @@ describe('[Comments] when parsing', () => {
flow.parser.yy.clear();
});
it('should handle a comments', function() {
const res = flow.parser.parse('graph TD;\n%% CComment\n A-->B;');
it('should handle comments', function() {
const res = flow.parser.parse('graph TD;\n%% Comment\n A-->B;');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
@ -27,7 +27,7 @@ describe('[Comments] when parsing', () => {
expect(edges[0].text).toBe('');
});
it('should handle comments a at the start', function() {
it('should handle comments at the start', function() {
const res = flow.parser.parse('%% Comment\ngraph TD;\n A-->B;');
const vert = flow.parser.yy.getVertices();
@ -43,7 +43,7 @@ describe('[Comments] when parsing', () => {
});
it('should handle comments at the end', function() {
const res = flow.parser.parse('graph TD;\n A-->B\n %% Comment at the find\n');
const res = flow.parser.parse('graph TD;\n A-->B\n %% Comment at the end\n');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
@ -117,7 +117,7 @@ describe('[Comments] when parsing', () => {
expect(edges[0].text).toBe('');
});
it('should handle a comments with blank rows in-between', function() {
it('should handle a comment with blank rows in-between', function() {
const res = flow.parser.parse('graph TD;\n\n\n %% Comment\n A-->B;');
const vert = flow.parser.yy.getVertices();
@ -132,7 +132,7 @@ describe('[Comments] when parsing', () => {
expect(edges[0].text).toBe('');
});
it('should handle a comments mermaid flowchart code in them', function() {
it('should handle a comment with mermaid flowchart code in them', function() {
const res = flow.parser.parse(
'graph TD;\n\n\n %% Test od>Odd shape]-->|Two line<br>edge comment|ro;\n A-->B;'
);

13
src/diagrams/flowchart/parser/flow.jison
View File

@ -9,7 +9,7 @@
%x string
%x dir
%%
\%\%[^\n]* /* do nothing */
\%\%[^\n]*\n* /* do nothing */
["] this.begin("string");
<string>["] this.popState();
<string>[^"]* return "STR";
@ -460,13 +460,6 @@ text: textToken
commentText: commentToken
{$$=$1;}
| commentText commentToken
{$$=$1+''+$2;}
;
keywords
: STYLE | LINKSTYLE | CLASSDEF | CLASS | CLICK | GRAPH | DIR | subgraph | end | DOWN | UP;
@ -516,8 +509,6 @@ linkStyleStatement
{$$ = $1;yy.updateLinkInterpolate($3,$7);}
;
commentStatement: PCT PCT commentText;
numList: NUM
{$$ = [$1]}
| numList COMMA NUM
@ -539,8 +530,6 @@ styleComponent: ALPHA | COLON | MINUS | NUM | UNIT | SPACE | HEX | BRKT | DOT |
/* Token lists */
commentToken : textToken | graphCodeTokens ;
textToken : textNoTagsToken | TAGSTART | TAGEND | '==' | '--' | PCT | DEFAULT;
textNoTagsToken: alphaNumToken | SPACE | MINUS | keywords ;