From 245e25f4b7393b5b1001ee38288934a7fddc77a1 Mon Sep 17 00:00:00 2001 From: Adrian Hall Date: Fri, 23 Oct 2020 10:00:17 +0100 Subject: [PATCH 01/26] Allow underscores in entity names, and entities with no relationships --- .../integration/rendering/erDiagram.spec.js | 17 ++++++++++++++ .../entityRelationshipDiagram.md | 22 ++++++++++--------- src/diagrams/er/parser/erDiagram.jison | 3 ++- src/diagrams/er/parser/erDiagram.spec.js | 19 ++++++++++++++++ 4 files changed, 50 insertions(+), 11 deletions(-) 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/diagrams-and-syntax-and-examples/entityRelationshipDiagram.md b/docs/diagrams-and-syntax-and-examples/entityRelationshipDiagram.md index 6e2bef467..cb52685de 100644 --- a/docs/diagrams-and-syntax-and-examples/entityRelationshipDiagram.md +++ b/docs/diagrams-and-syntax-and-examples/entityRelationshipDiagram.md @@ -6,7 +6,7 @@ sort: 7 > An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types). Wikipedia. -Note that practitioners of ER modelling almost always refer to *entity types* simply as *entities*. For example the CUSTOMER entity type would be referred to simply as the CUSTOMER entity. This is so common it would be inadvisable to do anything else, but technically an entity is an abstract *instance* of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them. This is why entities are always named using singular nouns. +Note that practitioners of ER modelling almost always refer to *entity types* simply as *entities*. For example the `CUSTOMER` entity *type* would be referred to simply as the `CUSTOMER` entity. This is so common it would be inadvisable to do anything else, but technically an entity is an abstract *instance* of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them. This is why entities are always named using singular nouns. Mermaid can render ER diagrams @@ -30,23 +30,23 @@ Relationships between entities are represented by lines with end markers represe ## Status -ER diagrams are a new feature in Mermaid and are **experimental**. There are likely to be a few bugs and constraints, and enhancements will be made in due course. Currently you can only define entities and relationships, but not attributes. +ER diagrams are a relatively new feature in Mermaid, so there are likely to be a few bugs and constraints, and enhancements will be made in due course. Currently you can only define entities and relationships, but not attributes. Inclusion of attributes is now actively being worked on. ## Syntax ### Entities and Relationships -Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to label the relationship. Each statement consists of the following parts, all of which are mandatory: +Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to label the relationship. Each statement consists of the following parts: ```markdown - : + [ : ] ``` Where: -- `first-entity` is the name of an entity. Names must begin with an alphabetic character and may also contain digits and hyphens +- `first-entity` is the name of an entity. Names must begin with an alphabetic character and may also contain digits, hyphens, and underscores. - `relationship` describes the way that both entities inter-relate. See below. -- `second-entity` is the name of the other entity +- `second-entity` is the name of the other entity. - `relationship-label` describes the relationship from the perspective of the first entity. For example: @@ -57,6 +57,8 @@ For example: This statement can be read as *a property contains one or more rooms, and a room is part of one and only one property*. You can see that the label here is from the first entity's perspective: a property contains a room, but a room does not contain a property. When considered from the perspective of the second entity, the equivalent label is usually very easy to infer. (Some ER diagrams label relationships from both perspectives, but this is not supported here, and is usually superfluous). +Only the `first-entity` part of a statement is mandatory. This makes it possible to show an entity with no relationships, which can be useful during iterative construction of diagrams. If any other parts of a statement are specified, then all parts are mandatory. + ### Relationship Syntax The `relationship` part of each statement can be broken down into three sub-components: @@ -69,10 +71,10 @@ Cardinality is a property that describes how many elements of another entity can | Value (left) | Value (right) | Meaning | |:------------:|:-------------:|--------------------------------------------------------| -| `\|o` | `o\|` | Zero or one | -| `\|\|` | `\|\|` | Exactly one | -| `}o` | `o{` | Zero or more (no upper limit) | -| `}\|` | `\|{` | One or more (no upper limit) | +| `|o` | `o|` | Zero or one | +| `||` | `||` | Exactly one | +| `}o` | `o{` | Zero or more (no upper limit) | +| `}|` | `|{` | One or more (no upper limit) | ### Identification diff --git a/src/diagrams/er/parser/erDiagram.jison b/src/diagrams/er/parser/erDiagram.jison index c1041a1da..339e57c4b 100644 --- a/src/diagrams/er/parser/erDiagram.jison +++ b/src/diagrams/er/parser/erDiagram.jison @@ -27,7 +27,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'; @@ -67,6 +67,7 @@ statement yy.addRelationship($1, $5, $3, $2); /*console.log($1 + $2 + $3 + ':' + $5);*/ } + | entityName { yy.addEntity($1); } ; entityName diff --git a/src/diagrams/er/parser/erDiagram.spec.js b/src/diagrams/er/parser/erDiagram.spec.js index 2dc49415e..afe236452 100644 --- a/src/diagrams/er/parser/erDiagram.spec.js +++ b/src/diagrams/er/parser/erDiagram.spec.js @@ -14,6 +14,25 @@ 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["DUCK-BILLED-PLATYPUS"]).toBe('DUCK-BILLED-PLATYPUS'); + expect (entities.CHARACTER_SET).toBe('CHARACTER_SET'); + }); + it('should associate two entities correctly', function() { erDiagram.parser.parse('erDiagram\nCAR ||--o{ DRIVER : "insured for"'); const entities = erDb.getEntities(); From 445daaeba2ccf9a440f49d124119676ff9647e01 Mon Sep 17 00:00:00 2001 From: NeilCuzon Date: Sun, 25 Oct 2020 00:30:20 -0700 Subject: [PATCH 02/26] Switching to Docsify and adding search --- README.md | 2 +- docs/.debug.yml | 5 - .../{_includes/assets/custom.js => .nojekyll} | 0 docs/{getting-started => }/8.6.0_docs.md | 429 +++++++++--------- .../CHANGELOG.md | 5 - docs/Gemfile | 5 - docs/Makefile | 14 - docs/README.md | 16 +- docs/{assets => }/SUMMARY.md | 0 docs/{getting-started => }/Setup.md | 5 - docs/{getting-started => }/Tutorials.md | 0 docs/_config.yml | 37 -- docs/_includes/assets/custom.scss | 0 docs/{assets => }/_navbar.md | 0 docs/_sidebar.md | 37 ++ docs/assets/_sidebar.md | 37 -- docs/{assets => }/breakingChanges.md | 0 .../classDiagram.md | 4 - .../developer-docs/configuration.md | 0 .../development.md | 9 +- .../README.md | 6 - .../directives.md | 6 +- .../entityRelationshipDiagram.md | 4 - .../examples.md | 4 - docs/{overview => }/faq.md | 5 - .../flowchart.md | 5 - .../gantt.md | 9 +- docs/getting-started/README.md | 6 - .../img/Gantt-excluded-days-within.png | Bin .../img/Gantt-long-weekend-look.png | Bin docs/{assets => }/img/GitHub-Mark-32px.png | Bin docs/{assets => }/img/assignWithDepth.png | Bin docs/{assets => }/img/class.png | Bin docs/{assets => }/img/er.png | Bin docs/{assets => }/img/flow.png | Bin docs/{assets => }/img/gantt.png | Bin docs/{assets => }/img/git.png | Bin docs/{assets => }/img/header.png | Bin docs/{assets => }/img/liveEditorOptions.png | Bin docs/{assets => }/img/n00b-Confluence1.png | Bin docs/{assets => }/img/n00b-Confluence2.png | Bin docs/{assets => }/img/n00b-Confluence3.png | Bin docs/{assets => }/img/n00b-Confluence4.png | Bin docs/{assets => }/img/n00b-firstFlow.png | Bin docs/{assets => }/img/n00b-liveEditor.png | Bin docs/{assets => }/img/new-diagrams.png | Bin .../img/object.assign without depth.png | Bin docs/{assets => }/img/sequence.png | Bin docs/{assets => }/img/simple-er.png | Bin docs/{assets => }/img/user-journey.png | Bin docs/{assets => }/img/without wrap.png | Bin docs/{assets => }/img/wrapped text.png | Bin .../{assets/index.docsify.html => index.html} | 2 + docs/{overview => }/integrations.md | 5 - docs/{assets => }/liveEditorOptions.png | Bin docs/{getting-started => }/mermaidCLI.md | 4 - docs/{getting-started => }/n00b-advanced.md | 5 - .../n00b-gettingStarted.md | 19 +- docs/{overview => }/n00b-overview.md | 5 - .../n00b-syntaxReference.md | 5 - .../newDiagram.md | 5 - docs/overview/README.md | 7 - .../pie.md | 5 - .../sequenceDiagram.md | 4 - .../stateDiagram.md | 4 - docs/{assets => }/theme.css | 0 docs/{assets => }/theme_themed.css | 0 docs/{getting-started => }/theming.md | 5 - docs/tutorials-and-community/README.md | 6 - docs/{assets => }/upgrading.md | 0 docs/{getting-started => }/usage.md | 5 - .../user-journey.md | 4 - 72 files changed, 272 insertions(+), 468 deletions(-) delete mode 100644 docs/.debug.yml rename docs/{_includes/assets/custom.js => .nojekyll} (100%) rename docs/{getting-started => }/8.6.0_docs.md (94%) rename docs/{tutorials-and-community => }/CHANGELOG.md (99%) delete mode 100644 docs/Gemfile delete mode 100644 docs/Makefile rename docs/{assets => }/SUMMARY.md (100%) rename docs/{getting-started => }/Setup.md (99%) rename docs/{getting-started => }/Tutorials.md (100%) delete mode 100644 docs/_config.yml delete mode 100644 docs/_includes/assets/custom.scss rename docs/{assets => }/_navbar.md (100%) create mode 100644 docs/_sidebar.md delete mode 100644 docs/assets/_sidebar.md rename docs/{assets => }/breakingChanges.md (100%) rename docs/{diagrams-and-syntax-and-examples => }/classDiagram.md (99%) rename docs/{assets => }/developer-docs/configuration.md (100%) rename docs/{tutorials-and-community => }/development.md (98%) delete mode 100644 docs/diagrams-and-syntax-and-examples/README.md rename docs/{diagrams-and-syntax-and-examples => }/directives.md (98%) rename docs/{diagrams-and-syntax-and-examples => }/entityRelationshipDiagram.md (99%) rename docs/{diagrams-and-syntax-and-examples => }/examples.md (99%) rename docs/{overview => }/faq.md (97%) rename docs/{diagrams-and-syntax-and-examples => }/flowchart.md (99%) rename docs/{diagrams-and-syntax-and-examples => }/gantt.md (98%) delete mode 100644 docs/getting-started/README.md rename docs/{assets => }/img/Gantt-excluded-days-within.png (100%) rename docs/{assets => }/img/Gantt-long-weekend-look.png (100%) rename docs/{assets => }/img/GitHub-Mark-32px.png (100%) rename docs/{assets => }/img/assignWithDepth.png (100%) rename docs/{assets => }/img/class.png (100%) rename docs/{assets => }/img/er.png (100%) rename docs/{assets => }/img/flow.png (100%) rename docs/{assets => }/img/gantt.png (100%) rename docs/{assets => }/img/git.png (100%) rename docs/{assets => }/img/header.png (100%) rename docs/{assets => }/img/liveEditorOptions.png (100%) rename docs/{assets => }/img/n00b-Confluence1.png (100%) rename docs/{assets => }/img/n00b-Confluence2.png (100%) rename docs/{assets => }/img/n00b-Confluence3.png (100%) rename docs/{assets => }/img/n00b-Confluence4.png (100%) rename docs/{assets => }/img/n00b-firstFlow.png (100%) rename docs/{assets => }/img/n00b-liveEditor.png (100%) rename docs/{assets => }/img/new-diagrams.png (100%) rename docs/{assets => }/img/object.assign without depth.png (100%) rename docs/{assets => }/img/sequence.png (100%) rename docs/{assets => }/img/simple-er.png (100%) rename docs/{assets => }/img/user-journey.png (100%) rename docs/{assets => }/img/without wrap.png (100%) rename docs/{assets => }/img/wrapped text.png (100%) rename docs/{assets/index.docsify.html => index.html} (99%) rename docs/{overview => }/integrations.md (99%) rename docs/{assets => }/liveEditorOptions.png (100%) rename docs/{getting-started => }/mermaidCLI.md (89%) rename docs/{getting-started => }/n00b-advanced.md (90%) rename docs/{getting-started => }/n00b-gettingStarted.md (96%) rename docs/{overview => }/n00b-overview.md (99%) rename docs/{diagrams-and-syntax-and-examples => }/n00b-syntaxReference.md (96%) rename docs/{tutorials-and-community => }/newDiagram.md (98%) delete mode 100644 docs/overview/README.md rename docs/{diagrams-and-syntax-and-examples => }/pie.md (97%) rename docs/{diagrams-and-syntax-and-examples => }/sequenceDiagram.md (99%) rename docs/{diagrams-and-syntax-and-examples => }/stateDiagram.md (99%) rename docs/{assets => }/theme.css (100%) rename docs/{assets => }/theme_themed.css (100%) rename docs/{getting-started => }/theming.md (99%) delete mode 100644 docs/tutorials-and-community/README.md rename docs/{assets => }/upgrading.md (100%) rename docs/{getting-started => }/usage.md (99%) rename docs/{diagrams-and-syntax-and-examples => }/user-journey.md (98%) 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/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..b15c1b980 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 + +## [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..89115a27d 100644 --- a/docs/tutorials-and-community/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -1,8 +1,3 @@ ---- -sort: 3 -title: Changelog ---- - # Change Log Here is the list of the newest versions in Descending Order, beginning from the latest version. 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..67003c72e 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,6 +1,6 @@ # 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) :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 +43,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 +61,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 +78,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 +99,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 +122,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 +134,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 +149,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 100% rename from docs/getting-started/Tutorials.md rename to docs/Tutorials.md 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 99% rename from docs/overview/integrations.md rename to docs/integrations.md index b728f9adb..b8a514f82 100644 --- a/docs/overview/integrations.md +++ b/docs/integrations.md @@ -1,8 +1,3 @@ ---- -sort: 2 -title: Use-Cases and Integrations ---- - # Integrations The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions 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 96% rename from docs/getting-started/n00b-gettingStarted.md rename to docs/n00b-gettingStarted.md index 17a154674..15e9dd62c 100644 --- a/docs/getting-started/n00b-gettingStarted.md +++ b/docs/n00b-gettingStarted.md @@ -1,8 +1,3 @@ ---- -sort: 1 -title: Getting started - easier ---- - # A basic mermaid User-Guide for Beginners Creating diagrams and charts using mermaid code is simple. @@ -31,15 +26,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 +52,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 99% rename from docs/overview/n00b-overview.md rename to docs/n00b-overview.md index ccb33d506..5b6b25b9c 100644 --- a/docs/overview/n00b-overview.md +++ b/docs/n00b-overview.md @@ -1,8 +1,3 @@ ---- -sort: 1 -title: Overview ---- - # Overview for Beginners ## Explaining with a Diagram diff --git a/docs/diagrams-and-syntax-and-examples/n00b-syntaxReference.md b/docs/n00b-syntaxReference.md similarity index 96% rename from docs/diagrams-and-syntax-and-examples/n00b-syntaxReference.md rename to docs/n00b-syntaxReference.md index ebc593803..f2622ee90 100644 --- a/docs/diagrams-and-syntax-and-examples/n00b-syntaxReference.md +++ b/docs/n00b-syntaxReference.md @@ -1,8 +1,3 @@ ---- -sort: 1 -title: Diagram syntax intro ---- - ## Diagram syntax 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. diff --git a/docs/tutorials-and-community/newDiagram.md b/docs/newDiagram.md similarity index 98% rename from docs/tutorials-and-community/newDiagram.md rename to docs/newDiagram.md index 57cf7b19a..cdcf684b9 100644 --- a/docs/tutorials-and-community/newDiagram.md +++ b/docs/newDiagram.md @@ -1,8 +1,3 @@ ---- -sort: 2 -title: Adding a New Diagram/Chart ---- - # Adding a New Diagram/Chart 📊 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 97% rename from docs/diagrams-and-syntax-and-examples/pie.md rename to docs/pie.md index 0ff549409..1c18e0be4 100644 --- a/docs/diagrams-and-syntax-and-examples/pie.md +++ b/docs/pie.md @@ -1,8 +1,3 @@ ---- -sort: 10 -title: Pie Chart ---- - # Pie chart diagrams > 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 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 99% rename from docs/diagrams-and-syntax-and-examples/stateDiagram.md rename to docs/stateDiagram.md index eeadb6678..5bec42408 100644 --- a/docs/diagrams-and-syntax-and-examples/stateDiagram.md +++ b/docs/stateDiagram.md @@ -1,7 +1,3 @@ ---- -sort: 6 ---- - # State diagrams > "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the case, while at other times this is a reasonable abstraction." Wikipedia 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..03e9d1ad1 100644 --- a/docs/getting-started/usage.md +++ b/docs/usage.md @@ -1,8 +1,3 @@ ---- -sort: 2 -title: API-Usage ---- - # Usage mermaid is a javascript tool that makes use of a markdown based syntax to render customizable diagrams and charts, for greater speed and ease. diff --git a/docs/diagrams-and-syntax-and-examples/user-journey.md b/docs/user-journey.md similarity index 98% rename from docs/diagrams-and-syntax-and-examples/user-journey.md rename to docs/user-journey.md index 4d33bf6e6..4e68f87bd 100644 --- a/docs/diagrams-and-syntax-and-examples/user-journey.md +++ b/docs/user-journey.md @@ -1,7 +1,3 @@ ---- -sort: 8 ---- - # User Journey Diagram > 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) From bd53fce4a71d68a14a1500e1a6c6d1d5faa31656 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Wed, 28 Oct 2020 00:15:17 -0700 Subject: [PATCH 03/26] Update 8.6.0_docs.md --- docs/8.6.0_docs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/8.6.0_docs.md b/docs/8.6.0_docs.md index b15c1b980..3ed69ed60 100644 --- a/docs/8.6.0_docs.md +++ b/docs/8.6.0_docs.md @@ -1,5 +1,5 @@ # Version 8.6.0 Changes - +**Edit this Page** [![N|Solid](./docs/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/) From be71cf5689bbaf7bbfe0edb9636f38e4f916c4d2 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Wed, 28 Oct 2020 00:16:40 -0700 Subject: [PATCH 04/26] Update 8.6.0_docs.md --- docs/8.6.0_docs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/8.6.0_docs.md b/docs/8.6.0_docs.md index 3ed69ed60..386cbee7c 100644 --- a/docs/8.6.0_docs.md +++ b/docs/8.6.0_docs.md @@ -1,5 +1,5 @@ # Version 8.6.0 Changes -**Edit this Page** [![N|Solid](./docs/img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/8.6.0_docs.md) +**Edit this Page** [![N|Solid](docs/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/) From f3fbc004f3e65ef4cf921cf6616d60a20b4695bb Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Wed, 28 Oct 2020 00:17:17 -0700 Subject: [PATCH 05/26] Update 8.6.0_docs.md --- docs/8.6.0_docs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/8.6.0_docs.md b/docs/8.6.0_docs.md index 386cbee7c..850a93bd6 100644 --- a/docs/8.6.0_docs.md +++ b/docs/8.6.0_docs.md @@ -1,5 +1,5 @@ # Version 8.6.0 Changes -**Edit this Page** [![N|Solid](docs/img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/8.6.0_docs.md) +**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/) From be73811c5329788cf41b8018d259b0ccfb058442 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Wed, 28 Oct 2020 00:18:12 -0700 Subject: [PATCH 06/26] Update README.md --- docs/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/README.md b/docs/README.md index 67003c72e..08074e170 100644 --- a/docs/README.md +++ b/docs/README.md @@ -2,6 +2,8 @@ ![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"!!!** **Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project 🙏** From 108f102360285e1500b4d2622768569279561951 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Wed, 28 Oct 2020 00:19:36 -0700 Subject: [PATCH 07/26] Update CHANGELOG.md --- docs/CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 89115a27d..61d56d78d 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -1,5 +1,7 @@ # 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 From 4e0fc58f606c6432f5b99dfcbc8e8f2b812eb7bc Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Wed, 28 Oct 2020 00:20:20 -0700 Subject: [PATCH 08/26] Update Tutorials.md --- docs/Tutorials.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/Tutorials.md b/docs/Tutorials.md index 1ab371d3d..0752df5bd 100644 --- a/docs/Tutorials.md +++ b/docs/Tutorials.md @@ -1,5 +1,6 @@ # 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. From 73b1953c095171e19a6b850d94470baed90bd798 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Wed, 28 Oct 2020 00:20:35 -0700 Subject: [PATCH 09/26] Update Tutorials.md --- docs/Tutorials.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/Tutorials.md b/docs/Tutorials.md index 0752df5bd..45d660a97 100644 --- a/docs/Tutorials.md +++ b/docs/Tutorials.md @@ -1,6 +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. From 3f568301705851a8f7737da37b8f142737cca062 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Wed, 28 Oct 2020 00:37:33 -0700 Subject: [PATCH 10/26] Update directives.md --- docs/directives.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/directives.md b/docs/directives.md index be6f17042..8d4b3f4aa 100644 --- a/docs/directives.md +++ b/docs/directives.md @@ -1,5 +1,7 @@ # Directives +**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/directives.md) + ## Directives were added in [Version 8.6.0](../getting-started/8.6.0_docs.md). Please Read it for more information. ## Directives From a9c30194330a14579eb0043adf762fa5aa0674b6 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Wed, 28 Oct 2020 00:37:35 -0700 Subject: [PATCH 11/26] Update entityRelationshipDiagram.md --- docs/entityRelationshipDiagram.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/entityRelationshipDiagram.md b/docs/entityRelationshipDiagram.md index ad6508078..f18e28924 100644 --- a/docs/entityRelationshipDiagram.md +++ b/docs/entityRelationshipDiagram.md @@ -1,5 +1,6 @@ # Entity Relationship Diagrams +**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/entityRelationshipDiagram.md > An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types). Wikipedia. Note that practitioners of ER modelling almost always refer to *entity types* simply as *entities*. For example the CUSTOMER entity type would be referred to simply as the CUSTOMER entity. This is so common it would be inadvisable to do anything else, but technically an entity is an abstract *instance* of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them. This is why entities are always named using singular nouns. From 9d09bdc1f3823b809514b63714f90d13de9b5dd5 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Wed, 28 Oct 2020 00:38:02 -0700 Subject: [PATCH 12/26] Update development.md --- docs/development.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/development.md b/docs/development.md index 0d311bb9d..511617338 100644 --- a/docs/development.md +++ b/docs/development.md @@ -1,5 +1,7 @@ # Development 🙌 +**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md) + So you want to help? That's great! From 31aebca134e40899c0b0f3c7fc46202352cb3e4b Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Wed, 28 Oct 2020 00:38:21 -0700 Subject: [PATCH 13/26] Update classDiagram.md --- docs/classDiagram.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/classDiagram.md b/docs/classDiagram.md index 5bced23a2..f49713f79 100644 --- a/docs/classDiagram.md +++ b/docs/classDiagram.md @@ -1,5 +1,7 @@ # Class diagrams +**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/classDiagram.md) + > "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects." > Wikipedia From de52808e9f4b686655cd1b4e62017c1f1b901443 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Wed, 28 Oct 2020 00:40:23 -0700 Subject: [PATCH 14/26] Update gantt.md --- docs/gantt.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/gantt.md b/docs/gantt.md index be90d8a8f..f9efe908c 100644 --- a/docs/gantt.md +++ b/docs/gantt.md @@ -1,5 +1,7 @@ # Gantt diagrams +**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/gantt.md) + > A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project. ## A note to users From adc900a03aad7f4df3b7e05967315aeff30e40e3 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Wed, 28 Oct 2020 00:40:25 -0700 Subject: [PATCH 15/26] Update flowchart.md --- docs/flowchart.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/flowchart.md b/docs/flowchart.md index 131b41459..85b76de2d 100644 --- a/docs/flowchart.md +++ b/docs/flowchart.md @@ -1,5 +1,8 @@ # Flowcharts - Basic Syntax + +**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/flowchart.md) + ## Graph This statement declares the direction of the Flowchart. From 87601fba1b5222d94c3dccff3bec6deee6b1bf6d Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Wed, 28 Oct 2020 00:40:29 -0700 Subject: [PATCH 16/26] Update faq.md --- docs/faq.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/faq.md b/docs/faq.md index 698061def..feeca5373 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -1,5 +1,7 @@ # Frequently Asked Questions +**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/faq.md) + 1. [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217) 1. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785) 1. [How to fix tooltip misplacement issue?](https://github.com/knsv/mermaid/issues/542#issuecomment-3343564621) From 3aa33bd720abba9c0ef0f0563791cf8110e4b19d Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Wed, 28 Oct 2020 00:40:31 -0700 Subject: [PATCH 17/26] Update examples.md --- docs/examples.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/examples.md b/docs/examples.md index 51a21caa1..4700785c4 100644 --- a/docs/examples.md +++ b/docs/examples.md @@ -1,5 +1,7 @@ # Examples +**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/examples.md) + This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications. ## If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](../getting-started/n00b-gettingStarted.md). From f835b34f57bb773f9afe0e6828385ba1a5ae8682 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Wed, 28 Oct 2020 00:44:27 -0700 Subject: [PATCH 18/26] Update newDiagram.md --- docs/newDiagram.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/newDiagram.md b/docs/newDiagram.md index cdcf684b9..ddd8670d0 100644 --- a/docs/newDiagram.md +++ b/docs/newDiagram.md @@ -1,6 +1,8 @@ # 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 From bc0caa5dd651c3da0951723366f884776bd466ae Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Wed, 28 Oct 2020 00:44:29 -0700 Subject: [PATCH 19/26] Update n00b-syntaxReference.md --- docs/n00b-syntaxReference.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/n00b-syntaxReference.md b/docs/n00b-syntaxReference.md index f2622ee90..15ff14207 100644 --- a/docs/n00b-syntaxReference.md +++ b/docs/n00b-syntaxReference.md @@ -1,5 +1,8 @@ ## 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. From 732b3289f09675213de75925745e8ccb7f1d6b52 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Wed, 28 Oct 2020 00:44:31 -0700 Subject: [PATCH 20/26] Update n00b-overview.md --- docs/n00b-overview.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/n00b-overview.md b/docs/n00b-overview.md index 5b6b25b9c..18271ed8e 100644 --- a/docs/n00b-overview.md +++ b/docs/n00b-overview.md @@ -1,5 +1,8 @@ # 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. From b70297dc7a03c2861fa26af1d470973db0e1eee5 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Wed, 28 Oct 2020 00:44:34 -0700 Subject: [PATCH 21/26] Update n00b-gettingStarted.md --- docs/n00b-gettingStarted.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/n00b-gettingStarted.md b/docs/n00b-gettingStarted.md index 15e9dd62c..a5db535f0 100644 --- a/docs/n00b-gettingStarted.md +++ b/docs/n00b-gettingStarted.md @@ -1,5 +1,7 @@ # 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. From 1ef7a097a65d48ac141c548ce56ef81a517bc179 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Wed, 28 Oct 2020 00:44:37 -0700 Subject: [PATCH 22/26] Update integrations.md --- docs/integrations.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/integrations.md b/docs/integrations.md index b8a514f82..f1ce8757b 100644 --- a/docs/integrations.md +++ b/docs/integrations.md @@ -1,5 +1,7 @@ # 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. From 64544a6e7cf0c118b974ce192157bd13aa493fbe Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Wed, 28 Oct 2020 01:09:49 -0700 Subject: [PATCH 23/26] Update pie.md --- docs/pie.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/pie.md b/docs/pie.md index 1c18e0be4..e2c1b31b7 100644 --- a/docs/pie.md +++ b/docs/pie.md @@ -1,5 +1,7 @@ # 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 From f7b722f10f72036fabf245bb82341f4be5341b80 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Wed, 28 Oct 2020 01:10:29 -0700 Subject: [PATCH 24/26] Update user-journey.md --- docs/user-journey.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/user-journey.md b/docs/user-journey.md index 4e68f87bd..9546bde88 100644 --- a/docs/user-journey.md +++ b/docs/user-journey.md @@ -1,5 +1,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: From 6ece2537ee77d27efb85fd91d0f8d464fe420178 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Wed, 28 Oct 2020 01:10:34 -0700 Subject: [PATCH 25/26] Update usage.md --- docs/usage.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/usage.md b/docs/usage.md index 03e9d1ad1..c9384e657 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -1,5 +1,7 @@ # 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. From 56fbbef133829e5b75f52dddeaced7692bd40e6c Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Wed, 28 Oct 2020 01:10:39 -0700 Subject: [PATCH 26/26] Update stateDiagram.md --- docs/stateDiagram.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/stateDiagram.md b/docs/stateDiagram.md index 5bec42408..de965bc57 100644 --- a/docs/stateDiagram.md +++ b/docs/stateDiagram.md @@ -1,5 +1,7 @@ # 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.