diff --git a/README.md b/README.md index 48a24359a..4451bef6d 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # mermaid [![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/Mermaid/mermaid) ![banner](./img/header.png) -**Edit this Page** [![N|Solid](./docs/assets/img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/README.md) +**Edit this Page** [![N|Solid](./docs/img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/README.md) :trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/2019) in the category "The most exciting use of technology"!!!** diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js index a387bf254..c72798e4c 100644 --- a/cypress/integration/rendering/erDiagram.spec.js +++ b/cypress/integration/rendering/erDiagram.spec.js @@ -141,4 +141,21 @@ describe('Entity Relationship Diagram', () => { expect(svg).to.not.have.attr('style'); }); }); + + it('should render entities that have no relationships', () => { + renderGraph( + ` + erDiagram + DEAD_PARROT + HERMIT + RECLUSE + SOCIALITE }o--o{ SOCIALITE : "interacts with" + RECLUSE }o--o{ SOCIALITE : avoids + `, + { er: { useMaxWidth: false } } + ); + cy.get('svg'); + }); + + }); diff --git a/docs/.debug.yml b/docs/.debug.yml deleted file mode 100644 index 3f966318a..000000000 --- a/docs/.debug.yml +++ /dev/null @@ -1,5 +0,0 @@ -remote_theme: false - -baseurl: /mermaid - -theme: jekyll-rtd-theme diff --git a/docs/_includes/assets/custom.js b/docs/.nojekyll similarity index 100% rename from docs/_includes/assets/custom.js rename to docs/.nojekyll diff --git a/docs/getting-started/8.6.0_docs.md b/docs/8.6.0_docs.md similarity index 94% rename from docs/getting-started/8.6.0_docs.md rename to docs/8.6.0_docs.md index ea1adfd9a..850a93bd6 100644 --- a/docs/getting-started/8.6.0_docs.md +++ b/docs/8.6.0_docs.md @@ -1,217 +1,212 @@ ---- -sort: 4 -title: Directives ---- - -# Version 8.6.0 Changes - -## [New Mermaid Live-Editor Beta](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ) - -## [CDN](https://unpkg.com/mermaid/) - -With version 8.6.0 comes the release of directives for mermaid, a new system for modifying configurations, with the aim of establishing centralized, sane defaults and simple implementation. - -`directives` allow for a diagram specific overriding of `config`, as it has been discussed in [Configurations](./Setup.md). -This allows site users to input modifications to `config` alongside diagram definitions, when creating diagrams on a private webpage that supports mermaid. - -**A likely application for this is in the creation of diagrams/charts inside company/organizational webpages, that rely on mermaid for diagram and chart rendering.** - -the `init` directive is the main method of configuration for Site and Current Levels. - -The three levels of are Configuration, Global, Site and Current. - -| Level of Configuration | Description | -| --- | --- | -| Global Configuration| Default Mermaid Configurations| -| Site Configuration| Configurations made by site owner| -| Current Configuration| Configurations made by Implementors| - - -# Limits to Modifying Configurations -**secure Array** - -| Parameter | Description |Type | Required | Values| -| --- | --- | --- | --- | --- | -| secure | Array of parameters excluded from init directive| Array | Required | Any parameters| - -The modifiable parts of the Configuration are limited by the secure array, which is an array of immutable parameters, this array can be expanded by site owners. - -**Notes**: secure arrays work like nesting dolls, with the Global Configurations’ secure array being the default and immutable list of immutable parameters, or the smallest doll, to which site owners may add to, but implementors may not modify it. - -# Secure Arrays - -Site owners can add to the **secure** array using this command: -mermaidAPI.initialize( { startOnLoad: true, secure: ['parameter1', 'parameter2'] } ); - -default values for the `secure array` consists of: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']. These default values are immutable. - -Implementors can only modify configurations using directives, but cannot change the `secure` array. - -# Modifying Configurations and directives: -The Two types of directives: are `init` or `initialize` and `wrap`. - -```note -All directives are enclosed in `%%{ }%%.` -``` - -Older versions of mermaid will not parse directives because `%%` will comment out the directive. This makes the update backward compatible. - -# Init -`init`, or `initialize`: the init or initialize directive gives the user the ability to overwrite and change the values for configuration parameters, with respect to the secure array that is in effect. - -| Parameter | Description |Type | Required | Values| -| --- | --- | --- | --- | --- | -| init | modifies configurations| Directive| Optional | Any parameters not included in the secure array| - - -```note -init would be an argument-directive: `%%{init: { **insert argument here**}}%%` - -The json object that is passed as {**argument** } must be valid, quoted json or it will be ignored. - **for example**: - -`%%{init: {"theme": default, "logLevel": 1 }}%%` - -Configurations that are passed through init cannot change the parameters in secure arrays of higher levels. In the event of a conflict, mermaid will give priority to secure arrays and parse the request, without changing the values of the parameters in conflict. - -When deployed within code, init is called before the graph/diagram description. -``` - -**for example**: -``` -%%{init: {"theme": "default", "logLevel": 1 }}%% - graph LR - a-->b - b-->c - c-->d - d-->e - e-->f - f-->g - g--> -``` -# Wrap - -| Parameter | Description |Type | Required | Values| -| --- | --- | --- | --- | --- | -| wrap | a callable text-wrap function| Directive| Optional | %%{wrap}%%| - -```note -Wrap is a function that is currently only deployable for sequence diagrams. - -wrap respects manually added so if the user wants to break up their text, they have full control over those breaks by adding their own tags. - -It is a non-argument directive and can be executed thusly: - -`%%{wrap}%%` . -``` - -**an example of text wrapping in a sequence diagram**: - -![Image showing wrapped text](../assets/img/wrapped%20text.png) - - -# Resetting Configurations: -There are two more functions in the mermaidAPI that can be called by site owners: **reset** and **globalReset**. - -**reset**: resets the configuration to whatever the last configuration was. This can be done to undo more recent changes to the last mermaidAPI.initialize({...}) configuration. - -**globalReset** will reset both the current configuration AND the site configuration back to the global defaults. - -**Notes**: both reset and globalReset are only available to site owners, as such implementors would have to edit their configs with init. - -# Additional Utils to mermaid -• **memoize**: simple caching for computationally expensive functions. It reduces the rendering time for computationally intensive diagrams by about 90%. - -• **assignWithDepth** - this is an improvement on previous functions with config.js and Object.assign. The purpose of this function is to provide a sane mechanism for merging objects, similar to object.assign, but with depth. - -Example of **assignWithDepth**: - -![Image showing assignWithDepth](../assets/img/assignWithDepth.png) - - -Example of **object.Assign**: - -![Image showing object.assign without depth](../assets/img/object.assign%20without%20depth.png) - -• **calculateTextDimensions, calculateTextWidth,** and **calculateTextHeight** - for measuring text dimensions, width and height. - -**Notes**:For more information on usage, parameters, and return info for these new functions take a look at the jsdocs for them in the utils package. - - -# New API Requests Introduced in Version 8.6.0 - -## setSiteConfig - -| Function | Description | Type | Values |Parameters|Returns| -| --------- | ------------------- | ------- | ------------------ | ------------------ | ------------------ | -| setSiteConfig|Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array|conf|siteConfig| - -```note -Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset -the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig -to the defaultConfig -Note: currentConfig is set in this function -Default value: At default, will mirror Global Config -``` - -## getSiteConfig - -| Function | Description | Type | Values | -| --------- | ------------------- | ------- | ------------------ | -| setSiteConfig|Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig| - -```note -Returns any values in siteConfig. -``` - -## setConfig - -| Function | Description | Type | Values |Parameters|Returns| -| --------- | ------------------- | ------- | ------------------ |----------|-------| -| setSiteConfig|Sets the siteConfig to desired values | Put Request| Any Values, those in secure array|conf|currentConfig merged with the sanitized conf| - -```note -Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any -values found in conf with key found in siteConfig.secure will be replaced with the corresponding -siteConfig value. -``` - -## getConfig - -| Function | Description | Type | Return Values | -| --------- | ------------------- | ------- | ------------------ | -| getConfig |Obtains the currentConfig | Get Request | Any Values from currentConfig| - - -```note -Returns any values in currentConfig. -``` - -## sanitize - -| Function | Description | Type | Values | -| --------- | ------------------- | ------- | ------------------ | -| sanitize |Sets the siteConfig to desired values. | Put Request(?) |None| - -```note -modifies options in-place -Ensures options parameter does not attempt to override siteConfig secure keys. -``` - -## reset - -| Function | Description | Type | Required | Values |Parameter| -| --------- | -------------------| ------- | -------- | ------------------ |---------| -| reset|Resets currentConfig to conf| Put Request | Required | None| conf| - -## conf - -| Parameter | Description |Type | Required | Values| -| --- | --- | --- | --- | --- | -| conf| base set of values, which currentConfig coul be reset to.| Dictionary | Required | Any Values, with respect to the secure Array| - -```note -default: current siteConfig (optional, default `getSiteConfig()`) -``` - -## For more information, read [Setup](Setup.md). +# Version 8.6.0 Changes +**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/8.6.0_docs.md) +## [New Mermaid Live-Editor Beta](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ) + +## [CDN](https://unpkg.com/mermaid/) + +With version 8.6.0 comes the release of directives for mermaid, a new system for modifying configurations, with the aim of establishing centralized, sane defaults and simple implementation. + +`directives` allow for a diagram specific overriding of `config`, as it has been discussed in [Configurations](./Setup.md). +This allows site users to input modifications to `config` alongside diagram definitions, when creating diagrams on a private webpage that supports mermaid. + +**A likely application for this is in the creation of diagrams/charts inside company/organizational webpages, that rely on mermaid for diagram and chart rendering.** + +the `init` directive is the main method of configuration for Site and Current Levels. + +The three levels of are Configuration, Global, Site and Current. + +| Level of Configuration | Description | +| --- | --- | +| Global Configuration| Default Mermaid Configurations| +| Site Configuration| Configurations made by site owner| +| Current Configuration| Configurations made by Implementors| + + +# Limits to Modifying Configurations +**secure Array** + +| Parameter | Description |Type | Required | Values| +| --- | --- | --- | --- | --- | +| secure | Array of parameters excluded from init directive| Array | Required | Any parameters| + +The modifiable parts of the Configuration are limited by the secure array, which is an array of immutable parameters, this array can be expanded by site owners. + +**Notes**: secure arrays work like nesting dolls, with the Global Configurations’ secure array being the default and immutable list of immutable parameters, or the smallest doll, to which site owners may add to, but implementors may not modify it. + +# Secure Arrays + +Site owners can add to the **secure** array using this command: +mermaidAPI.initialize( { startOnLoad: true, secure: ['parameter1', 'parameter2'] } ); + +default values for the `secure array` consists of: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']. These default values are immutable. + +Implementors can only modify configurations using directives, but cannot change the `secure` array. + +# Modifying Configurations and directives: +The Two types of directives: are `init` or `initialize` and `wrap`. + +```note +All directives are enclosed in `%%{ }%%.` +``` + +Older versions of mermaid will not parse directives because `%%` will comment out the directive. This makes the update backward compatible. + +# Init +`init`, or `initialize`: the init or initialize directive gives the user the ability to overwrite and change the values for configuration parameters, with respect to the secure array that is in effect. + +| Parameter | Description |Type | Required | Values| +| --- | --- | --- | --- | --- | +| init | modifies configurations| Directive| Optional | Any parameters not included in the secure array| + + +```note +init would be an argument-directive: `%%{init: { **insert argument here**}}%%` + +The json object that is passed as {**argument** } must be valid, quoted json or it will be ignored. + **for example**: + +`%%{init: {"theme": default, "logLevel": 1 }}%%` + +Configurations that are passed through init cannot change the parameters in secure arrays of higher levels. In the event of a conflict, mermaid will give priority to secure arrays and parse the request, without changing the values of the parameters in conflict. + +When deployed within code, init is called before the graph/diagram description. +``` + +**for example**: +``` +%%{init: {"theme": "default", "logLevel": 1 }}%% + graph LR + a-->b + b-->c + c-->d + d-->e + e-->f + f-->g + g--> +``` +# Wrap + +| Parameter | Description |Type | Required | Values| +| --- | --- | --- | --- | --- | +| wrap | a callable text-wrap function| Directive| Optional | %%{wrap}%%| + +```note +Wrap is a function that is currently only deployable for sequence diagrams. + +wrap respects manually added so if the user wants to break up their text, they have full control over those breaks by adding their own tags. + +It is a non-argument directive and can be executed thusly: + +`%%{wrap}%%` . +``` + +**an example of text wrapping in a sequence diagram**: + +![Image showing wrapped text](img/wrapped%20text.png) + + +# Resetting Configurations: +There are two more functions in the mermaidAPI that can be called by site owners: **reset** and **globalReset**. + +**reset**: resets the configuration to whatever the last configuration was. This can be done to undo more recent changes to the last mermaidAPI.initialize({...}) configuration. + +**globalReset** will reset both the current configuration AND the site configuration back to the global defaults. + +**Notes**: both reset and globalReset are only available to site owners, as such implementors would have to edit their configs with init. + +# Additional Utils to mermaid +• **memoize**: simple caching for computationally expensive functions. It reduces the rendering time for computationally intensive diagrams by about 90%. + +• **assignWithDepth** - this is an improvement on previous functions with config.js and Object.assign. The purpose of this function is to provide a sane mechanism for merging objects, similar to object.assign, but with depth. + +Example of **assignWithDepth**: + +![Image showing assignWithDepth](img/assignWithDepth.png) + + +Example of **object.Assign**: + +![Image showing object.assign without depth](img/object.assign%20without%20depth.png) + +• **calculateTextDimensions, calculateTextWidth,** and **calculateTextHeight** - for measuring text dimensions, width and height. + +**Notes**:For more information on usage, parameters, and return info for these new functions take a look at the jsdocs for them in the utils package. + + +# New API Requests Introduced in Version 8.6.0 + +## setSiteConfig + +| Function | Description | Type | Values |Parameters|Returns| +| --------- | ------------------- | ------- | ------------------ | ------------------ | ------------------ | +| setSiteConfig|Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array|conf|siteConfig| + +```note +Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset +the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig +to the defaultConfig +Note: currentConfig is set in this function +Default value: At default, will mirror Global Config +``` + +## getSiteConfig + +| Function | Description | Type | Values | +| --------- | ------------------- | ------- | ------------------ | +| setSiteConfig|Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig| + +```note +Returns any values in siteConfig. +``` + +## setConfig + +| Function | Description | Type | Values |Parameters|Returns| +| --------- | ------------------- | ------- | ------------------ |----------|-------| +| setSiteConfig|Sets the siteConfig to desired values | Put Request| Any Values, those in secure array|conf|currentConfig merged with the sanitized conf| + +```note +Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any +values found in conf with key found in siteConfig.secure will be replaced with the corresponding +siteConfig value. +``` + +## getConfig + +| Function | Description | Type | Return Values | +| --------- | ------------------- | ------- | ------------------ | +| getConfig |Obtains the currentConfig | Get Request | Any Values from currentConfig| + + +```note +Returns any values in currentConfig. +``` + +## sanitize + +| Function | Description | Type | Values | +| --------- | ------------------- | ------- | ------------------ | +| sanitize |Sets the siteConfig to desired values. | Put Request(?) |None| + +```note +modifies options in-place +Ensures options parameter does not attempt to override siteConfig secure keys. +``` + +## reset + +| Function | Description | Type | Required | Values |Parameter| +| --------- | -------------------| ------- | -------- | ------------------ |---------| +| reset|Resets currentConfig to conf| Put Request | Required | None| conf| + +## conf + +| Parameter | Description |Type | Required | Values| +| --- | --- | --- | --- | --- | +| conf| base set of values, which currentConfig coul be reset to.| Dictionary | Required | Any Values, with respect to the secure Array| + +```note +default: current siteConfig (optional, default `getSiteConfig()`) +``` + +## For more information, read [Setup](Setup.md). diff --git a/docs/tutorials-and-community/CHANGELOG.md b/docs/CHANGELOG.md similarity index 99% rename from docs/tutorials-and-community/CHANGELOG.md rename to docs/CHANGELOG.md index 1614490dc..61d56d78d 100644 --- a/docs/tutorials-and-community/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -1,10 +1,7 @@ ---- -sort: 3 -title: Changelog ---- - # Change Log +**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/CHANGELOG.md) + Here is the list of the newest versions in Descending Order, beginning from the latest version. ## Unreleased diff --git a/docs/Gemfile b/docs/Gemfile deleted file mode 100644 index ec073cbec..000000000 --- a/docs/Gemfile +++ /dev/null @@ -1,5 +0,0 @@ -source "https://rubygems.org" - -gem "jekyll-rtd-theme" - -gem "github-pages", group: :jekyll_plugins diff --git a/docs/Makefile b/docs/Makefile deleted file mode 100644 index d3677042c..000000000 --- a/docs/Makefile +++ /dev/null @@ -1,14 +0,0 @@ -default: - @gem install jekyll bundler && bundle install - -update: - @bundle update - -clean: - @bundle exec jekyll clean - -build: clean - @bundle exec jekyll build --profile --config _config.yml,.debug.yml - -server: clean - @bundle exec jekyll server --livereload --config _config.yml,.debug.yml diff --git a/docs/README.md b/docs/README.md index 5a6e26ac4..08074e170 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,6 +1,8 @@ # mermaid [![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/Mermaid/mermaid) -![banner](assets/img/header.png) +![banner](img/header.png) + +**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/README.md) :trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/#nominees) in the category "The most exciting use of technology"!!!** @@ -43,7 +45,7 @@ graph TD; C-->D; ``` -![Flowchart](assets/img/flow.png) +![Flowchart](img/flow.png) ### [Sequence diagram](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/sequenceDiagram.html) @@ -61,7 +63,7 @@ sequenceDiagram Bob-->>John: Jolly good! ``` -![Sequence diagram](assets/img/sequence.png) +![Sequence diagram](img/sequence.png) ### [Gantt diagram](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/gantt.html) @@ -78,7 +80,7 @@ Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d ``` -![Gantt diagram](assets/img/gantt.png) +![Gantt diagram](img/gantt.png) ### [Class diagram - :exclamation: experimental](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/classDiagram.html) @@ -99,7 +101,7 @@ Class01 : int gorilla Class08 <--> C2: Cool label ``` -![Class diagram](assets/img/class.png) +![Class diagram](img/class.png) ### Git graph - :exclamation: experimental @@ -122,7 +124,7 @@ commit merge newbranch ``` -![Git graph](assets/img/git.png) +![Git graph](img/git.png) ### [Entity Relationship Diagram - :exclamation: experimental](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/entityRelationshipDiagram.html) @@ -134,7 +136,7 @@ erDiagram ``` -![ER diagram](assets/img/simple-er.png) +![ER diagram](img/simple-er.png) ### [User Journey Diagram](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/user-journey.html) @@ -149,7 +151,7 @@ journey Go downstairs: 5: Me Sit down: 5: Me ``` -![Journey diagram](assets/img/user-journey.png) +![Journey diagram](img/user-journey.png) # Installation ## In depth guides and examples can be found in [Getting Started](getting-started/n00b-gettingStarted.md) and [Usage](getting-started/usage.md). diff --git a/docs/assets/SUMMARY.md b/docs/SUMMARY.md similarity index 100% rename from docs/assets/SUMMARY.md rename to docs/SUMMARY.md diff --git a/docs/getting-started/Setup.md b/docs/Setup.md similarity index 99% rename from docs/getting-started/Setup.md rename to docs/Setup.md index 371f2882d..c71eda826 100644 --- a/docs/getting-started/Setup.md +++ b/docs/Setup.md @@ -1,8 +1,3 @@ ---- -sort: 3 -title: Configurations ---- - ## mermaidAPI diff --git a/docs/getting-started/Tutorials.md b/docs/Tutorials.md similarity index 90% rename from docs/getting-started/Tutorials.md rename to docs/Tutorials.md index 1ab371d3d..45d660a97 100644 --- a/docs/getting-started/Tutorials.md +++ b/docs/Tutorials.md @@ -1,5 +1,7 @@ # Tutorials +**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/Tutorials.md) + This is list of publicly available Tutorials for using Mermaid.JS . This is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML. For most purposes, you can use the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor), to quickly and easily render a diagram. diff --git a/docs/_config.yml b/docs/_config.yml deleted file mode 100644 index 4cff4dcbc..000000000 --- a/docs/_config.yml +++ /dev/null @@ -1,37 +0,0 @@ -title: mermaid -lang: en -description: Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs. - -remote_theme: rundocs/jekyll-rtd-theme - -mermaid: - custom: https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js - -copyright: - since: 2014 - revision: true - -edit: true -addons_branch: true - -google: - gtag: UA-153180559-1 - -sass: - style: compressed - -addons: - - github - - i18n - - analytics - -plugins: - - jemoji - -readme_index: - with_frontmatter: true - -exclude: - - Makefile - - Gemfile - - Gemfile.lock diff --git a/docs/_includes/assets/custom.scss b/docs/_includes/assets/custom.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/docs/assets/_navbar.md b/docs/_navbar.md similarity index 100% rename from docs/assets/_navbar.md rename to docs/_navbar.md diff --git a/docs/_sidebar.md b/docs/_sidebar.md new file mode 100644 index 000000000..73e47297c --- /dev/null +++ b/docs/_sidebar.md @@ -0,0 +1,37 @@ +- Overview 📚 + - [mermaid](README.md) + - [overview](n00b-overview.md) + - [Use-Cases and Integrations](integrations.md) + - [FAQ](faq.md) + +- Getting Started✒️ + + - [Getting started - easier](n00b-gettingStarted.md) + - [Tutorials](Tutorials.md) + - [API-Usage](usage.md) + - [Configurations](Setup.md) + - [Directives](8.6.0_docs.md) + - [Theming](theming.md) + - [mermaid CLI](mermaidCLI.md) + - [Advanced usage](n00b-advanced.md) + + +- Contributions and Community 🙌 + + - [Development and Contribution ](development.md) + - [Mermaid Versions](versionUpdates.md) + - [Changelog](CHANGELOG.md) + - [Adding Diagrams ](newDiagram.md) + +- Diagrams and Syntax and Examples 📊 + + - [Diagram syntax intro](n00b-syntaxReference.md) + - [Examples](examples.md) + - [Flowchart](flowchart.md) + - [Sequence diagram](sequenceDiagram.md) + - [Class Diagram](classDiagram.md) + - [State Diagram](stateDiagram.md) + - [Entity Relationship Diagram](entityRelationshipDiagram.md) + - [User Journey](user-journey.md) + - [Gantt](gantt.md) + - [Pie Chart](pie.md) diff --git a/docs/assets/_sidebar.md b/docs/assets/_sidebar.md deleted file mode 100644 index fadb30424..000000000 --- a/docs/assets/_sidebar.md +++ /dev/null @@ -1,37 +0,0 @@ -- Overview - - [mermaid](README.md) - - - - -- Getting Started - - - - - - - - - - - -- Contributions and Community - - - - - - -- Diagrams and Syntax and Examples - - - - + + diff --git a/docs/overview/integrations.md b/docs/integrations.md similarity index 98% rename from docs/overview/integrations.md rename to docs/integrations.md index b728f9adb..f1ce8757b 100644 --- a/docs/overview/integrations.md +++ b/docs/integrations.md @@ -1,10 +1,7 @@ ---- -sort: 2 -title: Use-Cases and Integrations ---- - # Integrations +**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/integrations.md) + The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions They also serve as proof of concept, for the variety of things that can be built with mermaid. diff --git a/docs/assets/liveEditorOptions.png b/docs/liveEditorOptions.png similarity index 100% rename from docs/assets/liveEditorOptions.png rename to docs/liveEditorOptions.png diff --git a/docs/getting-started/mermaidCLI.md b/docs/mermaidCLI.md similarity index 89% rename from docs/getting-started/mermaidCLI.md rename to docs/mermaidCLI.md index 79d2f7257..f9473f1dd 100644 --- a/docs/getting-started/mermaidCLI.md +++ b/docs/mermaidCLI.md @@ -1,7 +1,3 @@ ---- -sort: 6 ---- - # mermaid CLI mermaid CLI has been moved to [mermaid-cli](https://github.com/mermaid-js/mermaid-cli). Please read its documentation instead. diff --git a/docs/getting-started/n00b-advanced.md b/docs/n00b-advanced.md similarity index 90% rename from docs/getting-started/n00b-advanced.md rename to docs/n00b-advanced.md index b05ddc967..407be8c08 100644 --- a/docs/getting-started/n00b-advanced.md +++ b/docs/n00b-advanced.md @@ -1,8 +1,3 @@ ---- -sort: 7 -title: Advanced usage ---- - # Advanced n00b mermaid (Coming soon..) ## splitting mermaid code from html diff --git a/docs/getting-started/n00b-gettingStarted.md b/docs/n00b-gettingStarted.md similarity index 95% rename from docs/getting-started/n00b-gettingStarted.md rename to docs/n00b-gettingStarted.md index 17a154674..a5db535f0 100644 --- a/docs/getting-started/n00b-gettingStarted.md +++ b/docs/n00b-gettingStarted.md @@ -1,10 +1,7 @@ ---- -sort: 1 -title: Getting started - easier ---- - # A basic mermaid User-Guide for Beginners +**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/n00b-gettingStarted.md) + Creating diagrams and charts using mermaid code is simple. The code is turned into a diagram in the web page with the use of a mermaid renderer. @@ -31,15 +28,15 @@ In the `Code` section one can write or edit raw mermaid code, and instantly `Pre **This is a great way to learn how to define a mermaid diagram.** -For some popular video tutorials on the live editor go to [Overview](../overview/n00b-overview.md). +For some popular video tutorials on the live editor go to [Overview](/overview/n00b-overview.md). -![Flowchart](../assets/img/n00b-liveEditor.png) +![Flowchart](/img/n00b-liveEditor.png) **Notes:** You can also click "Copy Markdown" to copy the markdown code for the diagram, that can then be pasted directly into your documentation. -![Flowchart](../assets/img/liveEditorOptions.png) +![Flowchart](/img/liveEditorOptions.png) The `Mermaid configuration` is for controlling mermaid behaviour. An easy introduction to mermaid configuration is found in the [Advanced usage](n00b-advanced.md) section. A complete configuration reference cataloguing default values is found on the [mermaidAPI](Setup.md) page. @@ -57,25 +54,25 @@ When the mermaid plugin is installed on a Confluence server, one can insert a me - In a Confluence page, Add Other macros. -![Flowchart](../assets/img/n00b-Confluence1.png) +![Flowchart](../img/n00b-Confluence1.png) --- - Search for mermaid. -![Flowchart](../assets/img/n00b-Confluence2.png) +![Flowchart](../img/n00b-Confluence2.png) --- - The mermaid object appears. Paste your mermaid code into it. -![Flowchart](../assets/img/n00b-Confluence3.png) +![Flowchart](../img/n00b-Confluence3.png) --- - Save the page and the diagram appears. -![Flowchart](../assets/img/n00b-Confluence4.png) +![Flowchart](../img/n00b-Confluence4.png) --- ## The following are two ways of hosting mermaid on a webpage. diff --git a/docs/overview/n00b-overview.md b/docs/n00b-overview.md similarity index 96% rename from docs/overview/n00b-overview.md rename to docs/n00b-overview.md index ccb33d506..18271ed8e 100644 --- a/docs/overview/n00b-overview.md +++ b/docs/n00b-overview.md @@ -1,10 +1,8 @@ ---- -sort: 1 -title: Overview ---- - # Overview for Beginners + +**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/n00b-overview.md) + ## Explaining with a Diagram A picture is worth a thousand words, a good diagram would be worth more. There is no disputing that they are indeed very useful. Yet very few people use them, even fewer still do so for documentation. Mainly because it takes too much time that could be used for more important functions. diff --git a/docs/diagrams-and-syntax-and-examples/n00b-syntaxReference.md b/docs/n00b-syntaxReference.md similarity index 90% rename from docs/diagrams-and-syntax-and-examples/n00b-syntaxReference.md rename to docs/n00b-syntaxReference.md index ebc593803..15ff14207 100644 --- a/docs/diagrams-and-syntax-and-examples/n00b-syntaxReference.md +++ b/docs/n00b-syntaxReference.md @@ -1,10 +1,8 @@ ---- -sort: 1 -title: Diagram syntax intro ---- - ## Diagram syntax + +**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/n00b-syntaxReference.md) + If you are new to mermaid, read the [Getting Started](../getting-started/n00b-gettingStarted.md) and [Overview](../overview/n00b-overview.md) sections, to learn the basics of mermaid. Video Tutorials can be found at the bottom of the Overview Section. diff --git a/docs/tutorials-and-community/newDiagram.md b/docs/newDiagram.md similarity index 96% rename from docs/tutorials-and-community/newDiagram.md rename to docs/newDiagram.md index 57cf7b19a..ddd8670d0 100644 --- a/docs/tutorials-and-community/newDiagram.md +++ b/docs/newDiagram.md @@ -1,11 +1,8 @@ ---- -sort: 2 -title: Adding a New Diagram/Chart ---- - # Adding a New Diagram/Chart 📊 +**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/newDiagram.md) + ### Step 1: Grammar & Parsing diff --git a/docs/overview/README.md b/docs/overview/README.md deleted file mode 100644 index 992a01213..000000000 --- a/docs/overview/README.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -sort: 1 ---- - -# Overview - -{% include list.liquid %} diff --git a/docs/diagrams-and-syntax-and-examples/pie.md b/docs/pie.md similarity index 93% rename from docs/diagrams-and-syntax-and-examples/pie.md rename to docs/pie.md index 0ff549409..e2c1b31b7 100644 --- a/docs/diagrams-and-syntax-and-examples/pie.md +++ b/docs/pie.md @@ -1,10 +1,7 @@ ---- -sort: 10 -title: Pie Chart ---- - # Pie chart diagrams +**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/pie.md) + > A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801 -Wikipedia diff --git a/docs/diagrams-and-syntax-and-examples/sequenceDiagram.md b/docs/sequenceDiagram.md similarity index 99% rename from docs/diagrams-and-syntax-and-examples/sequenceDiagram.md rename to docs/sequenceDiagram.md index 8ff4ccdd5..0416f451b 100644 --- a/docs/diagrams-and-syntax-and-examples/sequenceDiagram.md +++ b/docs/sequenceDiagram.md @@ -1,7 +1,3 @@ ---- -sort: 4 ---- - # Sequence diagrams > A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order. diff --git a/docs/diagrams-and-syntax-and-examples/stateDiagram.md b/docs/stateDiagram.md similarity index 98% rename from docs/diagrams-and-syntax-and-examples/stateDiagram.md rename to docs/stateDiagram.md index eeadb6678..de965bc57 100644 --- a/docs/diagrams-and-syntax-and-examples/stateDiagram.md +++ b/docs/stateDiagram.md @@ -1,9 +1,7 @@ ---- -sort: 6 ---- - # State diagrams +**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/stateDiagram.md) + > "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. 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. diff --git a/docs/assets/theme.css b/docs/theme.css similarity index 100% rename from docs/assets/theme.css rename to docs/theme.css diff --git a/docs/assets/theme_themed.css b/docs/theme_themed.css similarity index 100% rename from docs/assets/theme_themed.css rename to docs/theme_themed.css diff --git a/docs/getting-started/theming.md b/docs/theming.md similarity index 99% rename from docs/getting-started/theming.md rename to docs/theming.md index 80a9a15dd..68343fb8c 100644 --- a/docs/getting-started/theming.md +++ b/docs/theming.md @@ -1,8 +1,3 @@ ---- -sort: 5 -title: Theming ---- - # Version 8.7.0: Theme Configuration With Version 8.7.0 Mermaid comes out with a system for dynamic and integrated configuration of the diagram themes. The objective of this is to increase the customizability of mermaid and the ease of Styling, with the customization of themes through the `%%init%%` directive and `initialize` calls. diff --git a/docs/tutorials-and-community/README.md b/docs/tutorials-and-community/README.md deleted file mode 100644 index 515540ede..000000000 --- a/docs/tutorials-and-community/README.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -sort: 3 ---- - -# Contributions and Community -{% include list.liquid %} diff --git a/docs/assets/upgrading.md b/docs/upgrading.md similarity index 100% rename from docs/assets/upgrading.md rename to docs/upgrading.md diff --git a/docs/getting-started/usage.md b/docs/usage.md similarity index 99% rename from docs/getting-started/usage.md rename to docs/usage.md index 7f4e8c8da..c9384e657 100644 --- a/docs/getting-started/usage.md +++ b/docs/usage.md @@ -1,10 +1,7 @@ ---- -sort: 2 -title: API-Usage ---- - # Usage +**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/usage.md) + mermaid is a javascript tool that makes use of a markdown based syntax to render customizable diagrams and charts, for greater speed and ease. mermaid was made to help Documentation catch up with Development, in quickly changing projects. diff --git a/docs/diagrams-and-syntax-and-examples/user-journey.md b/docs/user-journey.md similarity index 87% rename from docs/diagrams-and-syntax-and-examples/user-journey.md rename to docs/user-journey.md index 4d33bf6e6..9546bde88 100644 --- a/docs/diagrams-and-syntax-and-examples/user-journey.md +++ b/docs/user-journey.md @@ -1,9 +1,8 @@ ---- -sort: 8 ---- - # User Journey Diagram + +**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/user-journey.md) + > User journeys describe at a high level of detail exactly what steps different users take to complete a specific task within a system, application or website. This technique shows the current (as-is) user workflow, and reveals areas of improvement for the to-be workflow. (Wikipedia) Mermaid can render user journey diagrams: diff --git a/src/diagrams/er/parser/erDiagram.jison b/src/diagrams/er/parser/erDiagram.jison index b79af786f..c3281502c 100644 --- a/src/diagrams/er/parser/erDiagram.jison +++ b/src/diagrams/er/parser/erDiagram.jison @@ -33,7 +33,7 @@ o\{ return 'ZERO_OR_MORE'; \-\- return 'IDENTIFYING'; \.\- return 'NON_IDENTIFYING'; \-\. return 'NON_IDENTIFYING'; -[A-Za-z][A-Za-z0-9\-]* return 'ALPHANUM'; +[A-Za-z][A-Za-z0-9\-_]* return 'ALPHANUM'; . return yytext[0]; <> return 'EOF'; diff --git a/src/diagrams/er/parser/erDiagram.spec.js b/src/diagrams/er/parser/erDiagram.spec.js index 2dc49415e..210811f6b 100644 --- a/src/diagrams/er/parser/erDiagram.spec.js +++ b/src/diagrams/er/parser/erDiagram.spec.js @@ -14,15 +14,32 @@ describe('when parsing ER diagram it...', function() { erDiagram.parser.yy.clear(); }); + it ('should allow stand-alone entities with no relationships', function() { + const line1 = 'ISLAND'; + const line2 = 'MAINLAND'; + erDiagram.parser.parse(`erDiagram\n${line1}\n${line2}`); + + expect(Object.keys(erDb.getEntities()).length).toBe(2); + expect(erDb.getRelationships().length).toBe(0); + }); + + it ('should allow hyphens and underscores in entity names', function() { + const line1 = 'DUCK-BILLED-PLATYPUS'; + const line2 = 'CHARACTER_SET'; + erDiagram.parser.parse(`erDiagram\n${line1}\n${line2}`); + + const entities = erDb.getEntities(); + expect(entities.hasOwnProperty('DUCK-BILLED-PLATYPUS')).toBe(true); + expect(entities.hasOwnProperty('CHARACTER_SET')).toBe(true); + }); + it('should associate two entities correctly', function() { erDiagram.parser.parse('erDiagram\nCAR ||--o{ DRIVER : "insured for"'); const entities = erDb.getEntities(); const relationships = erDb.getRelationships(); - const carEntity = entities.CAR; - const driverEntity = entities.DRIVER; - expect(carEntity).toBe('CAR'); - expect(driverEntity).toBe('DRIVER'); + expect(entities.hasOwnProperty('CAR')).toBe(true); + expect(entities.hasOwnProperty('DRIVER')).toBe(true); expect(relationships.length).toBe(1); expect(relationships[0].relSpec.cardA).toBe(erDb.Cardinality.ZERO_OR_MORE); expect(relationships[0].relSpec.cardB).toBe(erDb.Cardinality.ONLY_ONE);