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

Merge branch 'develop' into sidv/esbuild 

* develop:
  Update prettier
  chore: Run postbuild with prepare
  (formatting) prettier fix
  Removed warnings in the grammar oand some console logging
  unmangle sentence about doc changes committed and showing up on docsify site
  change references from /docs to /src/docs; rework doc section in CONTRIBUTING
This commit is contained in:
Sidharth Vinod 2022-09-07 21:03:07 +05:30
parent a61c17c1a9 e310af7673
commit 86cbf85358
No known key found for this signature in database
GPG Key ID: FB5CCD378D3907CD
10 changed files with 132 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
CONTRIBUTING.md
View File

@ -20,8 +20,8 @@ yarn test
We make all changes via pull requests. As we have many pull requests from developers new to mermaid, the current approach is to have _knsv, Knut Sveidqvist_ as a main reviewer of changes and merging pull requests. More precisely like this:
- Large changes reviewed by knsv or other developer asked to review by knsv
- Smaller low-risk changes like dependencies, documentation etc can be merged by active collaborators
- documentation (updates to the docs folder is also allowed via direct commits)
- Smaller low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
- Documentation (updates to the `src/docs` folder is also allowed via direct commits)
To commit code, create a branch, let it start with the type like feature or bug followed by the issue number for reference and some describing text.
@ -37,12 +37,28 @@ Another:
Less strict here, it is OK to commit directly in the `develop` branch if you are a collaborator.
The documentation is located in the `docs` directory and published using GitHub Pages.
The documentation site is powered by [Docsify](https://docsify.js.org), a simple documentation site generator.
The documentation is written in **Markdown**. For more information about Markdown [see the GitHub Markdown help page](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax).
The documentation is written in Markdown, for more information about Markdown [see the GitHub Markdown help page](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax).
### Documentation source files are in /src/docs
If you want to preview the documentation site on your machine, you need to install `docsify-cli`:
The source files for the project documentation are located in the `/src/docs` directory. This is where you should make changes.
The files under `/src/docs` are processed to generate the published documentation, and the resulting files are put into the `/docs` directory.
```mermaid
flowchart LR
classDef default fill:#fff,color:black,stroke:black
source["files in /src/docs\n(changes should be done here)"] -- automatic processing\nto generate the final documentation--> published["files in /docs\ndisplayed on the official documentation site"]
```
**_DO NOT CHANGE FILES IN `/docs`_**
### The official documentation site
**[The mermaid documentation site](https://mermaid-js.github.io/mermaid/) is powered by [Docsify](https://docsify.js.org), a simple documentation site generator.**
If you want to preview the whole documentation site on your machine, you need to install `docsify-cli`:
```sh
$ npm i docsify-cli -g
@ -121,9 +137,13 @@ it('should render forks and joins', () => {
Finally, if it is not in the documentation, no one will know about it and then **no one will use it**. Wouldn't that be sad? With all the effort that was put into the feature?
The docs are located in the docs folder and are ofc written in markdown. Just pick the right section and start typing. If you want to add to the structure as in adding a new section and new file you do that via the \_navbar.md.
The source files for documentation are in `/src/docs` and are written in markdown. Just pick the right section and start typing. See the [Committing Documentation](#committing-documentation) section for more about how the documentation is generated.
The changes in master is reflected in https://mermaid-js.github.io/mermaid/ once released the updates are committed to https://mermaid-js.github.io/#/
#### Adding to or changing the documentation organization
If you want to add a new section or change the organization (structure), then you need to make sure to **change the side navigation** in `src/docs/_sidebar.md`.
When changes are committed and then released, they become part of the `master` branch and become part of the published documentation on https://mermaid-js.github.io/mermaid/
## Last words

14
docs/development.md
View File

@ -8,7 +8,7 @@ So you want to help? That's great!
Here are a few things to get you started on the right path.
**The Docs Structure is dictated by [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**
**The Docs Structure is dictated by [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/src/docs/_sidebar.md)**
**Note: Commits and Pull Requests should be directed to the develop branch.**
@ -46,9 +46,9 @@ Start with the type, such as **feature** or **bug**, followed by the issue numbe
If it is not in the documentation, it's like it never happened. Wouldn't that be sad? With all the effort that was put into the feature?
The docs are located in the `src/docs` folder and are written in Markdown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via the **[sidebar](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**.
The docs are located in the `src/docs` folder and are written in Markdown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via the **[sidebar](https://github.com/mermaid-js/mermaid/edit/develop/src/docs/_sidebar.md)**.
> **All the documents displayed in the github.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**.
> **All the documents displayed in the GitHub.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/src/docs/_sidebar.md)**.
The contents of <https://mermaid-js.github.io/mermaid/> are based on the docs from the `master` branch. Updates committed to the `master` branch are reflected in the [Mermaid Docs](https://mermaid-js.github.io/mermaid/) once released.
@ -60,7 +60,7 @@ The documentation is located in the `src/docs` directory and organized according
The `docs` folder will be automatically generated when committing to `src/docs` and should not be edited manually.
We encourage contributions to the documentation at [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s)
We encourage contributions to the documentation at [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/src/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s)
### Add Unit Tests for Parsing
@ -73,7 +73,7 @@ This tests the rendering and visual appearance of the diagrams. This ensures tha
To start working with the e2e tests:
1. Run `yarn dev` to start the dev server
2. Start **Cypress** by running `cypress open` in the **mermaid** folder.\
2. Start **Cypress** by running `cypress open` in the **mermaid** folder.
(Make sure you have path to Cypress in order, the binary is located in `node_modules/.bin`).
The rendering tests are very straightforward to create. There is a function `imgSnapshotTest`, which takes a diagram in text form and the mermaid options, and it renders that diagram in Cypress.
@ -114,7 +114,7 @@ Markdown is used to format the text, for more information about Markdown [see th
To edit Docs on your computer:
1. Find the Markdown file (.md) to edit in the [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs) directory in the `develop` branch.
1. Find the Markdown file (.md) to edit in the [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/src/docs) directory in the `develop` branch.
2. Create a fork of the develop branch.
3. Make changes or add new documentation.
4. Commit changes to your fork and push it to GitHub.
@ -123,7 +123,7 @@ To edit Docs on your computer:
To edit Docs on GitHub:
1. Login to [GitHub.com](https://www.github.com).
2. Navigate to [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs).
2. Navigate to [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/src/docs).
3. To edit a file, click the pencil icon at the top-right of the file contents panel.
4. Describe what you changed in the **Propose file change** section, located at the bottom of the page.
5. Submit your changes by clicking the button **Propose file change** at the bottom (by automatic creation of a fork and a new branch).

10
docs/mindmap.md
View File

@ -2,7 +2,7 @@
# Mindmap
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/mindmap.md)
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/src/docs/mindmap.md)
> Mindmap: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stabel except for the icon integration which is the experimental part.
@ -64,7 +64,7 @@ In the following example you can see how there are 3 dufferent levels. One with
B
C
In summary is is a simple text outline where there are one node at the root level called `Root` which has one child `A`. A in turn has two children `B`and `C`. In the diagram below we can see this rendered as a mindmap.
In summary is a simple text outline where there are one node at the root level called `Root` which has one child `A`. `A` in turn has two children `B`and `C`. In the diagram below we can see this rendered as a mindmap.
```mermaid-example
mindmap
@ -168,7 +168,7 @@ More shapes will be added, beginning with the shapes available in flowcharts.
## icons
As with flowcharts you can add icons to your nodes but with an updated syntax. The styling for the font based icons are added during the integration so that they are available for the web page. _This is not something a diagram author can do but has to be done with the site administrator or the integrator_. Once the icon fonts are in place you add them to the mind map nodes using the `::icon()` syntax. You place the classes for the icon within the parethesis like in the following example where icons for material design and fontwaresome 4. is displayed. The intention is that this approach should be used for all diagrams supporting icons. **Expermental feature:** This wider scope is also the reason Mindmaps are experimental as this syntax and approach could change.
As with flowcharts you can add icons to your nodes but with an updated syntax. The styling for the font based icons are added during the integration so that they are available for the web page. _This is not something a diagram author can do but has to be done with the site administrator or the integrator_. Once the icon fonts are in place you add them to the mind map nodes using the `::icon()` syntax. You place the classes for the icon within the parenthesis like in the following example where icons for material design and fontawesome 4 are displayed. The intention is that this approach should be used for all diagrams supporting icons. **Experimental feature:** This wider scope is also the reason Mindmaps are experimental as this syntax and approach could change.
```mermaid-example
mindmap
@ -190,7 +190,7 @@ mindmap
## Classes
Again the syntax for adding classes is similar to flowcharts and you can add classes using a tripple colon following a numver of css classes separated by space. In the following example one of the nodes has two custom classes attached urgent turning the background red and the text whiet and large increasing the font size:
Again the syntax for adding classes is similar to flowcharts. You can add classes using a triple colon following a number of css classes separated by space. In the following example one of the nodes has two custom classes attached urgent turning the background red and the text white and large increasing the font size:
```mermaid-example
mindmap
@ -222,7 +222,7 @@ The actual indentation does not really matter only compared with the previous ro
B
C
This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a highter indentation nor does ot haver the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as sieblings.
This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings.
```mermaid-example
mindmap

12
package.json
View File

@ -31,10 +31,10 @@
"build": "yarn clean; concurrently \"yarn build:code\" \"yarn build:types\"",
"docs:build": "ts-node-esm src/docs.mts",
"docs:verify": "ts-node-esm src/docs.mts --verify",
"postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > src/docs/Setup.md; prettier --write src/docs/Setup.md; yarn docs:build",
"postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > src/docs/Setup.md && prettier --write src/docs/Setup.md && yarn docs:build",
"release": "yarn build",
"lint": "eslint --cache --ignore-path .gitignore .; prettier --check .",
"lint:fix": "eslint --fix --ignore-path .gitignore .; prettier --write .",
"lint": "eslint --cache --ignore-path .gitignore . && prettier --check .",
"lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
"e2e:depr": "yarn lint && jest e2e --config e2e/jest.config.js",
"cypress": "cypress run",
"cypress:open": "cypress open",
@ -45,7 +45,7 @@
"test": "yarn lint && jest src/.*",
"test:watch": "jest --watch src",
"prepublishOnly": "yarn build && yarn test",
"prepare": "concurrently \"husky install\" \"yarn build\"",
"prepare": "concurrently \"husky install\" \"yarn build:prod\" \"yarn postbuild\"",
"pre-commit": "lint-staged"
},
"repository": {
@ -120,8 +120,8 @@
"lint-staged": "^13.0.0",
"moment": "^2.23.0",
"path-browserify": "^1.0.1",
"prettier": "^2.3.2",
"prettier-plugin-jsdoc": "^0.3.30",
"prettier": "^2.7.1",
"prettier-plugin-jsdoc": "^0.4.2",
"remark": "^14.0.2",
"rimraf": "^3.0.2",
"start-server-and-test": "^1.12.6",

48
src/diagrams/mindmap/mindmap.spec.js
View File

@ -1,4 +1,5 @@
import * as mindmapDB from './mindmapDb';
import { setLogLevel } from '../../logger';
describe('when parsing a mindmap ', function () {
let mindmap;
@ -6,9 +7,10 @@ describe('when parsing a mindmap ', function () {
mindmap = require('./parser/mindmap').parser;
mindmap.yy = require('./mindmapDb');
mindmap.yy.clear();
setLogLevel('trace');
});
describe('hiearchy', function () {
it('should handle a simple root definition', function () {
it('MMP-1 should handle a simple root definition abc122', function () {
let str = `mindmap
root`;
@ -16,7 +18,7 @@ describe('when parsing a mindmap ', function () {
// console.log('Time for checks', mindmap.yy.getMindmap().descr);
expect(mindmap.yy.getMindmap().descr).toEqual('root');
});
it('should handle a hierachial mindmap definition', function () {
it('MMP-2 should handle a hierachial mindmap definition', function () {
let str = `mindmap
root
child1
@ -31,7 +33,7 @@ describe('when parsing a mindmap ', function () {
expect(mm.children[1].descr).toEqual('child2');
});
it('should handle a simple root definition with a shape and without an id abc123', function () {
it('3 should handle a simple root definition with a shape and without an id abc123', function () {
let str = `mindmap
(root)`;
@ -40,7 +42,7 @@ describe('when parsing a mindmap ', function () {
expect(mindmap.yy.getMindmap().descr).toEqual('root');
});
it('should handle a deeper hierachial mindmap definition', function () {
it('MMP-4 should handle a deeper hierachial mindmap definition', function () {
let str = `mindmap
root
child1
@ -55,7 +57,7 @@ describe('when parsing a mindmap ', function () {
expect(mm.children[0].children[0].descr).toEqual('leaf1');
expect(mm.children[1].descr).toEqual('child2');
});
it('Multiple roots are illegal', function () {
it('5 Multiple roots are illegal', function () {
let str = `mindmap
root
fakeRoot`;
@ -70,7 +72,7 @@ describe('when parsing a mindmap ', function () {
);
}
});
it('real root in wrong place', function () {
it('MMP-6 real root in wrong place', function () {
let str = `mindmap
root
fakeRoot
@ -88,7 +90,7 @@ describe('when parsing a mindmap ', function () {
});
});
describe('nodes', function () {
it('should handle an id and type for a node definition', function () {
it('MMP-7 should handle an id and type for a node definition', function () {
let str = `mindmap
root[The root]
`;
@ -99,7 +101,7 @@ describe('when parsing a mindmap ', function () {
expect(mm.descr).toEqual('The root');
expect(mm.type).toEqual(mindmap.yy.nodeType.RECT);
});
it('should handle an id and type for a node definition', function () {
it('MMP-8 should handle an id and type for a node definition', function () {
let str = `mindmap
root
theId(child1)`;
@ -113,7 +115,7 @@ describe('when parsing a mindmap ', function () {
expect(child.nodeId).toEqual('theId');
expect(child.type).toEqual(mindmap.yy.nodeType.ROUNDED_RECT);
});
it('should handle an id and type for a node definition', function () {
it('MMP-9 should handle an id and type for a node definition', function () {
let str = `mindmap
root
theId(child1)`;
@ -127,10 +129,10 @@ root
expect(child.nodeId).toEqual('theId');
expect(child.type).toEqual(mindmap.yy.nodeType.ROUNDED_RECT);
});
it('mutiple types (circle)', function () {
it('MMP-10 mutiple types (circle)', function () {
let str = `mindmap
root((the root))
`;
`;
mindmap.parse(str);
const mm = mindmap.yy.getMindmap();
@ -139,7 +141,7 @@ root
expect(mm.type).toEqual(mindmap.yy.nodeType.CIRCLE);
});
it('mutiple types (cloud)', function () {
it('MMP-11 mutiple types (cloud)', function () {
let str = `mindmap
root)the root(
`;
@ -150,7 +152,7 @@ root
expect(mm.children.length).toEqual(0);
expect(mm.type).toEqual(mindmap.yy.nodeType.CLOUD);
});
it('mutiple types (bang)', function () {
it('MMP-12 mutiple types (bang)', function () {
let str = `mindmap
root))the root((
`;
@ -163,7 +165,7 @@ root
});
});
describe('decorations', function () {
it('should be possible to set an icon for the node', function () {
it('MMP-13 should be possible to set an icon for the node', function () {
let str = `mindmap
root[The root]
::icon(bomb)
@ -177,7 +179,7 @@ root
expect(mm.type).toEqual(mindmap.yy.nodeType.RECT);
expect(mm.icon).toEqual('bomb');
});
it('should be possible to set classes for the node', function () {
it('MMP-14 should be possible to set classes for the node', function () {
let str = `mindmap
root[The root]
:::m-4 p-8
@ -191,7 +193,7 @@ root
expect(mm.type).toEqual(mindmap.yy.nodeType.RECT);
expect(mm.class).toEqual('m-4 p-8');
});
it('should be possible to set both classes and icon for the node', function () {
it('MMP-15 should be possible to set both classes and icon for the node', function () {
let str = `mindmap
root[The root]
:::m-4 p-8
@ -207,7 +209,7 @@ root
expect(mm.class).toEqual('m-4 p-8');
expect(mm.icon).toEqual('bomb');
});
it('should be possible to set both classes and icon for the node', function () {
it('MMP-16 should be possible to set both classes and icon for the node', function () {
let str = `mindmap
root[The root]
::icon(bomb)
@ -225,7 +227,7 @@ root
});
});
describe('descriptions', function () {
it('should be possible to use node syntax in the descriptions', function () {
it('MMP-17 should be possible to use node syntax in the descriptions', function () {
let str = `mindmap
root["String containing []"]
`;
@ -234,7 +236,7 @@ root
expect(mm.nodeId).toEqual('root');
expect(mm.descr).toEqual('String containing []');
});
it('should be possible to use node syntax in the descriptions in children', function () {
it('MMP-18 should be possible to use node syntax in the descriptions in children', function () {
let str = `mindmap
root["String containing []"]
child1["String containing ()"]
@ -246,7 +248,7 @@ root
expect(mm.children.length).toEqual(1);
expect(mm.children[0].descr).toEqual('String containing ()');
});
it('should be possible to have a child after a class assignment', function () {
it('MMP-19 should be possible to have a child after a class assignment', function () {
let str = `mindmap
root(Root)
Child(Child)
@ -266,7 +268,7 @@ root
expect(child.children[1].nodeId).toEqual('b');
});
});
it('should be possible to have meaningless empty rows in a mindmap abc124', function () {
it('MMP-20 should be possible to have meaningless empty rows in a mindmap abc124', function () {
let str = `mindmap
root(Root)
Child(Child)
@ -285,7 +287,7 @@ root
expect(child.children.length).toEqual(2);
expect(child.children[1].nodeId).toEqual('b');
});
it('should be possible to have comments in a mindmap', function () {
it('MMP-21 should be possible to have comments in a mindmap', function () {
let str = `mindmap
root(Root)
Child(Child)
@ -306,7 +308,7 @@ root
expect(child.children[1].nodeId).toEqual('b');
});
it('should be possible to have comments at the end of a line', function () {
it('MMP-22 should be possible to have comments at the end of a line', function () {
let str = `mindmap
root(Root)
Child(Child)

7
src/diagrams/mindmap/mindmapDb.js
View File

@ -1,6 +1,6 @@
/** Created by knut on 15-01-14. */
import { sanitizeText, getConfig } from '../../diagram-api/diagramAPI';
import { log } from '../../logger';
import { log as _log } from '../../logger';
let nodes = [];
let cnt = 0;
@ -25,7 +25,7 @@ export const getMindmap = () => {
return nodes.length > 0 ? nodes[0] : null;
};
export const addNode = (level, id, descr, type) => {
console.info('addNode', level, id, descr, type);
log.info('addNode', level, id, descr, type);
const conf = getConfig();
const node = {
id: cnt++,
@ -132,7 +132,8 @@ export const type2Str = (type) => {
return 'no-border';
}
};
// Expose logger to grammar
export const log = _log;
export const getNodeById = (id) => nodes[id];
export const getElementById = (id) => elements[id];
// export default {

75
src/diagrams/mindmap/parser/mindmap.jison
View File

@ -17,20 +17,21 @@
%%
\s*\%\%.*\n {console.log('Found comment',yytext);}
\s*\%\%.* {yy.log.trace('Found comment',yytext);}
// \%\%[^\n]*\n /* skip comments */
"mindmap" return 'MINDMAP';
":::" { this.begin('CLASS'); }
<CLASS>.+ { this.popState();return 'CLASS'; }
<CLASS>\n { this.popState();}
[\n\s]*"::icon(" { this.begin('ICON'); }
[\n]+ /* return 'NL'; */
// [\s]*"::icon(" { this.begin('ICON'); }
"::icon(" { yy.log.trace('Begin icon');this.begin('ICON'); }
[\n]+ return 'NL';
<ICON>[^\)]+ { return 'ICON'; }
<ICON>\) {this.popState();}
"-)" { console.log('Exploding node'); this.begin('NODE');return 'NODE_DSTART'; }
"(-" { console.log('Cloud'); this.begin('NODE');return 'NODE_DSTART'; }
"))" { console.log('Explosion Bang'); this.begin('NODE');return 'NODE_DSTART'; }
")" { console.log('Cloud Bang'); this.begin('NODE');return 'NODE_DSTART'; }
<ICON>\) {yy.log.trace('end icon');this.popState();}
"-)" { yy.log.trace('Exploding node'); this.begin('NODE');return 'NODE_DSTART'; }
"(-" { yy.log.trace('Cloud'); this.begin('NODE');return 'NODE_DSTART'; }
"))" { yy.log.trace('Explosion Bang'); this.begin('NODE');return 'NODE_DSTART'; }
")" { yy.log.trace('Cloud Bang'); this.begin('NODE');return 'NODE_DSTART'; }
"((" { this.begin('NODE');return 'NODE_DSTART'; }
"(" { this.begin('NODE');return 'NODE_DSTART'; }
"[" { this.begin('NODE');return 'NODE_DSTART'; }
@ -38,18 +39,18 @@
// !(-\() return 'NODE_ID';
[^\(\[\n\-\)]+ return 'NODE_ID';
<<EOF>> return 'EOF';
<NODE>["] { console.log('Starting NSTR');this.begin("NSTR");}
<NSTR>[^"]+ { console.log('description:', yytext); return "NODE_DESCR";}
<NODE>["] { yy.log.trace('Starting NSTR');this.begin("NSTR");}
<NSTR>[^"]+ { yy.log.trace('description:', yytext); return "NODE_DESCR";}
<NSTR>["] {this.popState();}
<NODE>[\)]\) {this.popState();console.log('node end ))');return "NODE_DEND";}
<NODE>[\)] {this.popState();console.log('node end )');return "NODE_DEND";}
<NODE>[\]] {this.popState();console.log('node end ...');return "NODE_DEND";}
<NODE>"(-" {this.popState();console.log('node end (-');return "NODE_DEND";}
<NODE>"-)" {this.popState();console.log('node end (-');return "NODE_DEND";}
<NODE>"((" {this.popState();console.log('node end ((');return "NODE_DEND";}
<NODE>"(" {this.popState();console.log('node end ((');return "NODE_DEND";}
<NODE>[^\)\]\(]+ { console.log('Long description:', yytext); return 'NODE_DESCR';}
<NODE>.+(?!\(\() { console.log('Long description:', yytext); return 'NODE_DESCR';}
<NODE>[\)]\) {this.popState();yy.log.trace('node end ))');return "NODE_DEND";}
<NODE>[\)] {this.popState();yy.log.trace('node end )');return "NODE_DEND";}
<NODE>[\]] {this.popState();yy.log.trace('node end ...',yytext);return "NODE_DEND";}
<NODE>"(-" {this.popState();yy.log.trace('node end (-');return "NODE_DEND";}
<NODE>"-)" {this.popState();yy.log.trace('node end (-');return "NODE_DEND";}
<NODE>"((" {this.popState();yy.log.trace('node end ((');return "NODE_DEND";}
<NODE>"(" {this.popState();yy.log.trace('node end ((');return "NODE_DEND";}
<NODE>[^\)\]\(]+ { yy.log.trace('Long description:', yytext); return 'NODE_DESCR';}
<NODE>.+(?!\(\() { yy.log.trace('Long description:', yytext); return 'NODE_DESCR';}
// [\[] return 'NODE_START';
// .+ return 'TXT' ;
@ -62,29 +63,33 @@
start
// %{ : info document 'EOF' { return yy; } }
: MINDMAP document { return yy; }
| MINDMAP NL document { return yy; }
| SPACELIST MINDMAP document { return yy; }
;
stop
: NL {yy.log.trace('Stop NL ');}
| EOF {yy.log.trace('Stop EOF ');}
| stop NL {yy.log.trace('Stop NL2 ');}
| stop EOF {yy.log.trace('Stop EOF2 ');}
;
document
: document line
| line
;
line
: statement { }
: document statement stop
| statement stop
;
statement
: SPACELIST node { yy.addNode($1.length, $2.id, $2.descr, $2.type); }
| SPACELIST ICON { yy.decorateNode({icon: $2}); }
| SPACELIST EOF
| SPACELIST NL
| node { console.log($1.id);yy.addNode(0, $1.id, $1.descr, $1.type); }
: SPACELIST node { yy.log.trace('Node: ',$2.id);yy.addNode($1.length, $2.id, $2.descr, $2.type); }
| SPACELIST ICON { yy.log.trace('Icon: ',$2);yy.decorateNode({icon: $2}); }
| SPACELIST CLASS { yy.decorateNode({class: $2}); }
| node { yy.log.trace('Node: ',$1.id);yy.addNode(0, $1.id, $1.descr, $1.type); }
| ICON { yy.decorateNode({icon: $1}); }
| SPACELIST CLASS { yy.decorateNode({class: $2}); }
| CLASS { yy.decorateNode({class: $1}); }
| EOF
| CLASS { yy.decorateNode({class: $1}); }
| SPACELIST
;
node
:nodeWithId
|nodeWithoutId
@ -92,12 +97,12 @@ node
nodeWithoutId
: NODE_DSTART NODE_DESCR NODE_DEND
{ console.log("node found ..", $1); $$ = { id: $2, descr: $2, type: yy.getType($1, $3) }; }
{ yy.log.trace("node found ..", $1); $$ = { id: $2, descr: $2, type: yy.getType($1, $3) }; }
;
nodeWithId
: NODE_ID { $$ = { id: $1, descr: $1, type: yy.nodeType.DEFAULT }; }
| NODE_ID NODE_DSTART NODE_DESCR NODE_DEND
{ console.log("node found ..", $1); $$ = { id: $1, descr: $3, type: yy.getType($2, $4) }; }
{ yy.log.trace("node found ..", $1); $$ = { id: $1, descr: $3, type: yy.getType($2, $4) }; }
;
%%

14
src/docs/development.md
View File

@ -6,7 +6,7 @@ So you want to help? That's great!
Here are a few things to get you started on the right path.
**The Docs Structure is dictated by [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**
**The Docs Structure is dictated by [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/src/docs/_sidebar.md)**
**Note: Commits and Pull Requests should be directed to the develop branch.**
@ -44,9 +44,9 @@ Start with the type, such as **feature** or **bug**, followed by the issue numbe
If it is not in the documentation, it's like it never happened. Wouldn't that be sad? With all the effort that was put into the feature?
The docs are located in the `src/docs` folder and are written in Markdown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via the **[sidebar](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**.
The docs are located in the `src/docs` folder and are written in Markdown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via the **[sidebar](https://github.com/mermaid-js/mermaid/edit/develop/src/docs/_sidebar.md)**.
> **All the documents displayed in the github.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**.
> **All the documents displayed in the GitHub.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/src/docs/_sidebar.md)**.
The contents of [https://mermaid-js.github.io/mermaid/](https://mermaid-js.github.io/mermaid/) are based on the docs from the `master` branch. Updates committed to the `master` branch are reflected in the [Mermaid Docs](https://mermaid-js.github.io/mermaid/) once released.
@ -58,7 +58,7 @@ The documentation is located in the `src/docs` directory and organized according
The `docs` folder will be automatically generated when committing to `src/docs` and should not be edited manually.
We encourage contributions to the documentation at [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s)
We encourage contributions to the documentation at [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/src/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s)
### Add Unit Tests for Parsing
@ -71,7 +71,7 @@ This tests the rendering and visual appearance of the diagrams. This ensures tha
To start working with the e2e tests:
1. Run `yarn dev` to start the dev server
2. Start **Cypress** by running `cypress open` in the **mermaid** folder.
2. Start **Cypress** by running `cypress open` in the **mermaid** folder.
(Make sure you have path to Cypress in order, the binary is located in `node_modules/.bin`).
The rendering tests are very straightforward to create. There is a function `imgSnapshotTest`, which takes a diagram in text form and the mermaid options, and it renders that diagram in Cypress.
@ -112,7 +112,7 @@ Markdown is used to format the text, for more information about Markdown [see th
To edit Docs on your computer:
1. Find the Markdown file (.md) to edit in the [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs) directory in the `develop` branch.
1. Find the Markdown file (.md) to edit in the [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/src/docs) directory in the `develop` branch.
2. Create a fork of the develop branch.
3. Make changes or add new documentation.
4. Commit changes to your fork and push it to GitHub.
@ -121,7 +121,7 @@ To edit Docs on your computer:
To edit Docs on GitHub:
1. Login to [GitHub.com](https://www.github.com).
2. Navigate to [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs).
2. Navigate to [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/src/docs).
3. To edit a file, click the pencil icon at the top-right of the file contents panel.
4. Describe what you changed in the **Propose file change** section, located at the bottom of the page.
5. Submit your changes by clicking the button **Propose file change** at the bottom (by automatic creation of a fork and a new branch).

10
src/docs/mindmap.md
View File

@ -1,6 +1,6 @@
# Mindmap
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/mindmap.md)
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/src/docs/mindmap.md)
> Mindmap: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stabel except for the icon integration which is the experimental part.
@ -43,7 +43,7 @@ mindmap
C
```
In summary is is a simple text outline where there are one node at the root level called `Root` which has one child `A`. A in turn has two children `B`and `C`. In the diagram below we can see this rendered as a mindmap.
In summary is a simple text outline where there are one node at the root level called `Root` which has one child `A`. `A` in turn has two children `B`and `C`. In the diagram below we can see this rendered as a mindmap.
```mermaid
mindmap
@ -109,7 +109,7 @@ More shapes will be added, beginning with the shapes available in flowcharts.
## icons
As with flowcharts you can add icons to your nodes but with an updated syntax. The styling for the font based icons are added during the integration so that they are available for the web page. _This is not something a diagram author can do but has to be done with the site administrator or the integrator_. Once the icon fonts are in place you add them to the mind map nodes using the `::icon()` syntax. You place the classes for the icon within the parethesis like in the following example where icons for material design and fontwaresome 4. is displayed. The intention is that this approach should be used for all diagrams supporting icons. **Expermental feature:** This wider scope is also the reason Mindmaps are experimental as this syntax and approach could change.
As with flowcharts you can add icons to your nodes but with an updated syntax. The styling for the font based icons are added during the integration so that they are available for the web page. _This is not something a diagram author can do but has to be done with the site administrator or the integrator_. Once the icon fonts are in place you add them to the mind map nodes using the `::icon()` syntax. You place the classes for the icon within the parenthesis like in the following example where icons for material design and fontawesome 4 are displayed. The intention is that this approach should be used for all diagrams supporting icons. **Experimental feature:** This wider scope is also the reason Mindmaps are experimental as this syntax and approach could change.
```mermaid-example
mindmap
@ -122,7 +122,7 @@ mindmap
## Classes
Again the syntax for adding classes is similar to flowcharts and you can add classes using a tripple colon following a numver of css classes separated by space. In the following example one of the nodes has two custom classes attached urgent turning the background red and the text whiet and large increasing the font size:
Again the syntax for adding classes is similar to flowcharts. You can add classes using a triple colon following a number of css classes separated by space. In the following example one of the nodes has two custom classes attached urgent turning the background red and the text white and large increasing the font size:
```mermaid-example
mindmap
@ -147,7 +147,7 @@ mindmap
C
```
This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a highter indentation nor does ot haver the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as sieblings.
This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings.
```mermaid
mindmap

10
yarn.lock
View File

@ -10162,16 +10162,16 @@ prelude-ls@~1.1.2:
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
prettier-plugin-jsdoc@^0.3.30:
version "0.3.38"
resolved "https://registry.yarnpkg.com/prettier-plugin-jsdoc/-/prettier-plugin-jsdoc-0.3.38.tgz#b8adbe9efc1dc11f3cc5ff0b07e0233a0fdf533d"
integrity sha512-h81ZV/nFk5gr3fzWMWzWoz/M/8FneAZxscT7DVSy+5jMIuWYnBFZfSswVKYZyTaZ5r6+6k4hpFTDWhRp85C1tg==
prettier-plugin-jsdoc@^0.4.2:
version "0.4.2"
resolved "https://registry.yarnpkg.com/prettier-plugin-jsdoc/-/prettier-plugin-jsdoc-0.4.2.tgz#c5668fc622ed10b87d988279476f96af96b058b7"
integrity sha512-w2jnAQm3z0GAG0bhzVJeehzDtrhGMSxJjit5ApCc2oxWfc7+jmLAkbtdOXaSpfwZz3IWkk+PiQPeRrLNpbM+Mw==
dependencies:
binary-searching "^2.0.5"
comment-parser "^1.3.1"
mdast-util-from-markdown "^1.2.0"
prettier@^2.3.2:
prettier@^2.7.1:
version "2.7.1"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64"
integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==