diff --git a/.eslintrc.json b/.eslintrc.json index dc5adb6f2e..9c755a0e2b 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -15,9 +15,9 @@ }, "extends": [ "eslint:recommended", - //"plugin:jsdoc/recommended", + "plugin:jsdoc/recommended", "plugin:json/recommended", - // "plugin:markdown/recommended", + "plugin:markdown/recommended", "plugin:prettier/recommended" ], "plugins": ["html", "jest", "jsdoc", "json", "prettier"], diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index 74e02e6cb8..f8e453bd3a 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -24,7 +24,7 @@ A clear and concise description of what you expected to happen. If applicable, add screenshots to help explain your problem. **Code Sample** -If applicable, add the code sample or a link to the [live editor](https://mermaid-js.github.io/mermaid-live-editor). +If applicable, add the code sample or a link to the [live editor](https://mermaid.live). **Desktop (please complete the following information):** - OS: [e.g. iOS] diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml index e4d82e2d19..0e0744404e 100644 --- a/.github/workflows/checks.yml +++ b/.github/workflows/checks.yml @@ -12,6 +12,7 @@ jobs: test: runs-on: ubuntu-latest name: check tests + if: github.repository_owner == 'mermaid' steps: - uses: actions/checkout@v2 with: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index c92f8d5730..9ed0a7eddf 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -6,6 +6,14 @@ So you want to help? That's great! Here are a few things to know to get you started on the right path. +## Development Installation +```bash +git clone git@github.com:mermaid-js/mermaid.git +cd mermaid +yarn +yarn test +``` + ## Committing code We make all changes via pull requests. As we have many pull requests from developers new to mermaid, the current approach is to have *knsv, Knut Sveidqvist* as a main reviewer of changes and merging pull requests. More precisely like this: diff --git a/README.md b/README.md index 5c2eefa8ce..0e49ea4dae 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ English | [简体中文](./README.zh-CN.md) ## About -Mermaid is a Javascript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development. +Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development. > Doc-Rot is a Catch-22 that Mermaid helps to solve. @@ -24,7 +24,7 @@ But not having diagrams or docs ruins productivity and hurts organizational lear Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).

-Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/).
+Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).
[Tutorials](./docs/Tutorials.md) has video tutorials. Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md). @@ -51,7 +51,7 @@ In our release process we rely heavily on visual regression tests using [applito __The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here jump into the [text syntax](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference).__ -### Flowchart [docs - live editor] +### Flowchart [docs - live editor] ``` flowchart LR @@ -71,7 +71,7 @@ C -->|Two| E[Result 2] ``` -### Sequence diagram [docs - live editor] +### Sequence diagram [docs - live editor] ``` sequenceDiagram @@ -96,7 +96,7 @@ John->>Bob: How about you? Bob-->>John: Jolly good! ``` -### Gantt chart [docs - live editor] +### Gantt chart [docs - live editor] ``` gantt @@ -119,7 +119,7 @@ gantt Parallel 4 : des6, after des4, 1d ``` -### Class diagram [docs - live editor] +### Class diagram [docs - live editor] ``` classDiagram @@ -158,7 +158,7 @@ class Class10 { } ``` -### State diagram [docs - live editor] +### State diagram [docs - live editor] ``` stateDiagram-v2 [*] --> Still @@ -178,24 +178,24 @@ Moving --> Crash Crash --> [*] ``` -### Pie chart [docs - live editor] +### Pie chart [docs - live editor] ``` pie "Dogs" : 386 -"Cats" : 85 +"Cats" : 85.9 "Rats" : 15 ``` ```mermaid pie "Dogs" : 386 -"Cats" : 85 +"Cats" : 85.9 "Rats" : 15 ``` -### Git graph [experimental - live editor] +### Git graph [experimental - live editor] -### User Journey diagram [docs - live editor] +### User Journey diagram [docs - live editor] ``` journey title My working day @@ -219,6 +219,77 @@ pie Sit down: 3: Me ``` +### C4 diagram [docs] + +``` +C4Context +title System Context diagram for Internet Banking System + +Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.") +Person(customerB, "Banking Customer B") +Person_Ext(customerC, "Banking Customer C") +System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") + +Person(customerD, "Banking Customer D", "A customer of the bank,
with personal bank accounts.") + +Enterprise_Boundary(b1, "BankBoundary") { + + SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") + + System_Boundary(b2, "BankBoundary2") { + System(SystemA, "Banking System A") + System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.") + } + + System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") + SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.") + + Boundary(b3, "BankBoundary3", "boundary") { + SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.") + SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.") + } +} + +BiRel(customerA, SystemAA, "Uses") +BiRel(SystemAA, SystemE, "Uses") +Rel(SystemAA, SystemC, "Sends e-mails", "SMTP") +Rel(SystemC, customerA, "Sends e-mails to") +``` +```mermaid +C4Context +title System Context diagram for Internet Banking System + +Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.") +Person(customerB, "Banking Customer B") +Person_Ext(customerC, "Banking Customer C") +System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") + +Person(customerD, "Banking Customer D", "A customer of the bank,
with personal bank accounts.") + +Enterprise_Boundary(b1, "BankBoundary") { + + SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") + + System_Boundary(b2, "BankBoundary2") { + System(SystemA, "Banking System A") + System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.") + } + + System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") + SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.") + + Boundary(b3, "BankBoundary3", "boundary") { + SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.") + SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.") + } +} + +BiRel(customerA, SystemAA, "Uses") +BiRel(SystemAA, SystemE, "Uses") +Rel(SystemAA, SystemC, "Sends e-mails", "SMTP") +Rel(SystemC, customerA, "Sends e-mails to") +``` + ## Release For those who have the permission to do so: diff --git a/README.zh-CN.md b/README.zh-CN.md index 63a3ee4aa6..3042304d90 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -20,7 +20,7 @@ Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markd 绘图和编写文档花费了开发者宝贵的开发时间，而且随着业务的变更，它很快就会过期。 但是如果缺少了图表或文档，对于生产力和团队新人的业务学习都会产生巨大的阻碍。
Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。

-Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/) 轻松创建详细的图表。
+Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。
你可以访问 [教程](./docs/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。 如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/n00b-overview.md), [用法](./docs/usage.md) 和 [教程](./docs/Tutorials.md). @@ -139,7 +139,7 @@ class Class10 { } ``` -### 状态图 [[docs - live editor] +### 状态图 [[docs - live editor] ``` stateDiagram-v2 @@ -202,6 +202,77 @@ pie Sit down: 3: Me ``` +### C4 图 [文档] + +``` +C4Context +title System Context diagram for Internet Banking System + +Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.") +Person(customerB, "Banking Customer B") +Person_Ext(customerC, "Banking Customer C") +System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") + +Person(customerD, "Banking Customer D", "A customer of the bank,
with personal bank accounts.") + +Enterprise_Boundary(b1, "BankBoundary") { + + SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") + + System_Boundary(b2, "BankBoundary2") { + System(SystemA, "Banking System A") + System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.") + } + + System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") + SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.") + + Boundary(b3, "BankBoundary3", "boundary") { + SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.") + SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.") + } +} + +BiRel(customerA, SystemAA, "Uses") +BiRel(SystemAA, SystemE, "Uses") +Rel(SystemAA, SystemC, "Sends e-mails", "SMTP") +Rel(SystemC, customerA, "Sends e-mails to") +``` +```mermaid +C4Context +title System Context diagram for Internet Banking System + +Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.") +Person(customerB, "Banking Customer B") +Person_Ext(customerC, "Banking Customer C") +System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") + +Person(customerD, "Banking Customer D", "A customer of the bank,
with personal bank accounts.") + +Enterprise_Boundary(b1, "BankBoundary") { + + SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") + + System_Boundary(b2, "BankBoundary2") { + System(SystemA, "Banking System A") + System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.") + } + + System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") + SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.") + + Boundary(b3, "BankBoundary3", "boundary") { + SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.") + SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.") + } +} + +BiRel(customerA, SystemAA, "Uses") +BiRel(SystemAA, SystemE, "Uses") +Rel(SystemAA, SystemC, "Sends e-mails", "SMTP") +Rel(SystemC, customerA, "Sends e-mails to") +``` + ## 发布 对于有权限的同学来说，你可以通过以下步骤来完成发布操作： diff --git a/cypress/e2e/other/configuration.spec.js b/cypress/e2e/other/configuration.spec.js index a92aae52b4..a67758d9cf 100644 --- a/cypress/e2e/other/configuration.spec.js +++ b/cypress/e2e/other/configuration.spec.js @@ -41,7 +41,7 @@ describe('Configuration', () => { .should('exist') .and('include', 'url(#'); }); - it('should handle arrowMarkerAbsolute excplicitly set to false', () => { + it('should handle arrowMarkerAbsolute explicitly set to false', () => { renderGraph( `graph TD A[Christmas] -->|Get money| B(Go shopping) @@ -63,7 +63,7 @@ describe('Configuration', () => { .should('exist') .and('include', 'url(#'); }); - it('should handle arrowMarkerAbsolute excplicitly set to "false" as false', () => { + it('should handle arrowMarkerAbsolute explicitly set to "false" as false', () => { renderGraph( `graph TD A[Christmas] -->|Get money| B(Go shopping) diff --git a/cypress/e2e/other/ghsa.spec.js b/cypress/e2e/other/ghsa.spec.js new file mode 100644 index 0000000000..5b168a8a8f --- /dev/null +++ b/cypress/e2e/other/ghsa.spec.js @@ -0,0 +1,10 @@ +import { urlSnapshotTest } from '../../helpers/util'; + +describe('CSS injections', () => { + it('should not allow CSS injections outside of the diagram', () => { + urlSnapshotTest('http://localhost:9000/ghsa1.html', { + logLevel: 1, + flowchart: { htmlLabels: false }, + }); + }); +}); diff --git a/cypress/e2e/other/rerender.spec.js b/cypress/e2e/other/rerender.spec.js index 8e8c686941..f160a2e273 100644 --- a/cypress/e2e/other/rerender.spec.js +++ b/cypress/e2e/other/rerender.spec.js @@ -1,5 +1,5 @@ describe('Rerendering', () => { - it('should be able to render after an error has occured', () => { + it('should be able to render after an error has occurred', () => { const url = 'http://localhost:9000/render-after-error.html'; cy.viewport(1440, 1024); cy.visit(url); diff --git a/cypress/e2e/other/xss.spec.js b/cypress/e2e/other/xss.spec.js index 6226feaeb9..912354f7de 100644 --- a/cypress/e2e/other/xss.spec.js +++ b/cypress/e2e/other/xss.spec.js @@ -60,52 +60,52 @@ describe('XSS', () => { cy.wait(1000); cy.get('#the-malware').should('not.exist'); }); - it('should not allow maniplulating htmlLabels into a false positive', () => { + it('should not allow manipulating htmlLabels into a false positive', () => { cy.visit('http://localhost:9000/xss4.html'); cy.wait(1000); cy.get('#the-malware').should('not.exist'); }); - it('should not allow maniplulating antiscript to run javascript', () => { + it('should not allow manipulating antiscript to run javascript', () => { cy.visit('http://localhost:9000/xss5.html'); cy.wait(1000); cy.get('#the-malware').should('not.exist'); }); - it('should not allow maniplulating antiscript to run javascript using onerror', () => { + it('should not allow manipulating antiscript to run javascript using onerror', () => { cy.visit('http://localhost:9000/xss6.html'); cy.wait(1000); cy.get('#the-malware').should('not.exist'); }); - it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre wrapper', () => { + it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre wrapper', () => { cy.visit('http://localhost:9000/xss8.html'); cy.wait(1000); cy.get('#the-malware').should('not.exist'); }); - it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => { + it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => { cy.visit('http://localhost:9000/xss9.html'); cy.wait(1000); cy.get('#the-malware').should('not.exist'); }); - it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => { + it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => { cy.visit('http://localhost:9000/xss10.html'); cy.wait(1000); cy.get('#the-malware').should('not.exist'); }); - it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => { + it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => { cy.visit('http://localhost:9000/xss11.html'); cy.wait(1000); cy.get('#the-malware').should('not.exist'); }); - it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => { + it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => { cy.visit('http://localhost:9000/xss12.html'); cy.wait(1000); cy.get('#the-malware').should('not.exist'); }); - it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => { + it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => { cy.visit('http://localhost:9000/xss13.html'); cy.wait(1000); cy.get('#the-malware').should('not.exist'); }); - it('should not allow maniplulating antiscript to run javascript iframes in class diagrams', () => { + it('should not allow manipulating antiscript to run javascript iframes in class diagrams', () => { cy.visit('http://localhost:9000/xss14.html'); cy.wait(1000); cy.get('#the-malware').should('not.exist'); diff --git a/cypress/e2e/rendering/classDiagram-v2.spec.js b/cypress/e2e/rendering/classDiagram-v2.spec.js index fd373da735..d285a92374 100644 --- a/cypress/e2e/rendering/classDiagram-v2.spec.js +++ b/cypress/e2e/rendering/classDiagram-v2.spec.js @@ -381,7 +381,7 @@ describe('Class diagram V2', () => { cy.get('svg'); }); - it('16b: should handle the direction statemnent with TB', () => { + it('16b: should handle the direction statement with TB', () => { imgSnapshotTest( ` classDiagram @@ -406,7 +406,7 @@ describe('Class diagram V2', () => { cy.get('svg'); }); - it('18: should handle the direction statemnent with LR', () => { + it('18: should handle the direction statement with LR', () => { imgSnapshotTest( ` classDiagram @@ -430,7 +430,7 @@ describe('Class diagram V2', () => { ); cy.get('svg'); }); - it('17a: should handle the direction statemnent with BT', () => { + it('17a: should handle the direction statement with BT', () => { imgSnapshotTest( ` classDiagram @@ -454,7 +454,7 @@ describe('Class diagram V2', () => { ); cy.get('svg'); }); - it('17b: should handle the direction statemment with RL', () => { + it('17b: should handle the direction statement with RL', () => { imgSnapshotTest( ` classDiagram diff --git a/cypress/e2e/rendering/conf-and-directives.spec.js b/cypress/e2e/rendering/conf-and-directives.spec.js index 76de5871d3..3fc0f7f02f 100644 --- a/cypress/e2e/rendering/conf-and-directives.spec.js +++ b/cypress/e2e/rendering/conf-and-directives.spec.js @@ -16,7 +16,7 @@ describe('Configuration and directives - nodes should be light blue', () => { ); cy.get('svg'); }); - it('Settigns from intitialize - nodes should be green', () => { + it('Settings from initialize - nodes should be green', () => { imgSnapshotTest( ` graph TD @@ -30,7 +30,7 @@ graph TD ); cy.get('svg'); }); - it('Settings from initialize overriding themeVariable - nodes shold be red', () => { + it('Settings from initialize overriding themeVariable - nodes should be red', () => { imgSnapshotTest( ` diff --git a/cypress/e2e/rendering/sequencediagram.spec.js b/cypress/e2e/rendering/sequencediagram.spec.js index 1122a30092..c110f05ada 100644 --- a/cypress/e2e/rendering/sequencediagram.spec.js +++ b/cypress/e2e/rendering/sequencediagram.spec.js @@ -76,7 +76,7 @@ context('Sequence diagram', () => { imgSnapshotTest( ` sequenceDiagram - Alice->>Bob: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be + Alice->>Bob: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be loop Loopy Bob->>Alice: Pasten end `, @@ -143,7 +143,7 @@ context('Sequence diagram', () => { imgSnapshotTest( ` sequenceDiagram - participant A as Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be + participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be A->>Bob: Hola Bob-->A: Pasten ! `, @@ -154,7 +154,7 @@ context('Sequence diagram', () => { imgSnapshotTest( ` sequenceDiagram - participant A as wrap:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be + participant A as wrap:Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be A->>Bob: Hola Bob-->A: Pasten ! `, @@ -166,7 +166,7 @@ context('Sequence diagram', () => { ` %%{init: {'config': {'wrap': true }}}%% sequenceDiagram - participant A as Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be + participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be A->>Bob: Hola Bob-->A: Pasten ! `, @@ -190,7 +190,7 @@ context('Sequence diagram', () => { ` sequenceDiagram Alice->>Bob: Hola - Note left of Alice: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be + Note left of Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short though `, {} @@ -201,7 +201,7 @@ context('Sequence diagram', () => { ` sequenceDiagram Alice->>Bob: Hola - Note left of Alice:wrap: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be + Note left of Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short though `, {} @@ -212,7 +212,7 @@ context('Sequence diagram', () => { ` sequenceDiagram Alice->>Bob: Hola - Note right of Alice: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be + Note right of Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short though `, {} @@ -223,7 +223,7 @@ context('Sequence diagram', () => { ` sequenceDiagram Alice->>Bob: Hola - Note right of Alice:wrap: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be + Note right of Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short though `, {} @@ -234,7 +234,7 @@ context('Sequence diagram', () => { ` sequenceDiagram Alice->>Bob: Hola - Note over Alice: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be + Note over Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short though `, {} @@ -245,7 +245,7 @@ context('Sequence diagram', () => { ` sequenceDiagram Alice->>Bob: Hola - Note over Alice:wrap: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be + Note over Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short though `, {} @@ -255,7 +255,7 @@ context('Sequence diagram', () => { imgSnapshotTest( ` sequenceDiagram - Alice->>Bob: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be + Alice->>Bob: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short though `, {} @@ -265,7 +265,7 @@ context('Sequence diagram', () => { imgSnapshotTest( ` sequenceDiagram - Alice->>Bob:wrap:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be + Alice->>Bob:wrap:Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short though `, {} @@ -276,7 +276,7 @@ context('Sequence diagram', () => { ` sequenceDiagram Alice->>Bob: I'm short - Bob->>Alice: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be + Bob->>Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be `, {} ); @@ -286,7 +286,7 @@ context('Sequence diagram', () => { ` sequenceDiagram Alice->>Bob: I'm short - Bob->>Alice:wrap: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be + Bob->>Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be `, {} ); diff --git a/cypress/helpers/util.js b/cypress/helpers/util.js index bef4099365..dd3fdd2c92 100644 --- a/cypress/helpers/util.js +++ b/cypress/helpers/util.js @@ -70,6 +70,56 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) => } }; +export const urlSnapshotTest = (url, _options, api = false, validation) => { + cy.log(_options); + const options = Object.assign(_options); + if (!options.fontFamily) { + options.fontFamily = 'courier'; + } + if (!options.sequence) { + options.sequence = {}; + } + if (!options.sequence || (options.sequence && !options.sequence.actorFontFamily)) { + options.sequence.actorFontFamily = 'courier'; + } + if (options.sequence && !options.sequence.noteFontFamily) { + options.sequence.noteFontFamily = 'courier'; + } + options.sequence.actorFontFamily = 'courier'; + options.sequence.noteFontFamily = 'courier'; + options.sequence.messageFontFamily = 'courier'; + if (options.sequence && !options.sequence.actorFontFamily) { + options.sequence.actorFontFamily = 'courier'; + } + if (!options.fontSize) { + options.fontSize = '16px'; + } + const useAppli = Cypress.env('useAppli'); + const branch = Cypress.env('codeBranch'); + cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot'); + const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-'); + + if (useAppli) { + cy.eyesOpen({ + appName: 'Mermaid-' + branch, + testName: name, + batchName: branch, + }); + } + + cy.visit(url); + if (validation) cy.get('svg').should(validation); + cy.get('body'); + // Default name to test title + + if (useAppli) { + cy.eyesCheckWindow('Click!'); + cy.eyesClose(); + } else { + cy.matchImageSnapshot(name); + } +}; + export const renderGraph = (graphStr, options, api) => { const url = mermaidUrl(graphStr, options, api); diff --git a/cypress/platform/current2.html b/cypress/platform/current2.html index 16ddb4a99a..6f9c2184a6 100644 --- a/cypress/platform/current2.html +++ b/cypress/platform/current2.html @@ -35,7 +35,7 @@

info below

sequenceDiagram - Alice->>Bob:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be + Alice->>Bob:Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short though
diff --git a/cypress/platform/exploit.js b/cypress/platform/exploit.js index 2b4b0baa53..ff3c918dcc 100644 --- a/cypress/platform/exploit.js +++ b/cypress/platform/exploit.js @@ -3,4 +3,4 @@ div.id = 'the-malware'; div.className = 'malware'; div.innerHTML = 'XSS Succeeded'; parent.document.getElementsByTagName('body')[0].appendChild(div); -throw new Error('XSS Succeded'); +throw new Error('XSS Succeeded'); diff --git a/cypress/platform/ghsa1.html b/cypress/platform/ghsa1.html new file mode 100644 index 0000000000..bf2008d7ed --- /dev/null +++ b/cypress/platform/ghsa1.html @@ -0,0 +1,28 @@ + + + +
+

This element does not belong to the SVG but we can style it

+
+ + + + + + + + diff --git a/cypress/platform/ghsa2.html b/cypress/platform/ghsa2.html new file mode 100644 index 0000000000..b4e390c6c4 --- /dev/null +++ b/cypress/platform/ghsa2.html @@ -0,0 +1,28 @@ + + + +
+

This element does not belong to the SVG but we can style it

+
+ + + + + + + + diff --git a/cypress/platform/xss.html b/cypress/platform/xss.html index e3a4c43517..3938c5aaee 100644 --- a/cypress/platform/xss.html +++ b/cypress/platform/xss.html @@ -31,7 +31,7 @@ document.getElementsByTagName('body')[0].appendChild(div); // const el = document.querySelector('.mermaid'); // el.parentNode.removeChild(el); - throw new Error('XSS Succeded'); + throw new Error('XSS Succeeded'); } diff --git a/cypress/platform/xss10.html b/cypress/platform/xss10.html index b78817a786..1a863b4b7d 100644 --- a/cypress/platform/xss10.html +++ b/cypress/platform/xss10.html @@ -84,7 +84,7 @@ div.className = 'malware'; div.innerHTML = 'XSS Succeeded'; document.getElementsByTagName('body')[0].appendChild(div); - throw new Error('XSS Succeded'); + throw new Error('XSS Succeeded'); } var diagram = 'classDiagram\n'; @@ -105,4 +105,3 @@ - diff --git a/cypress/platform/xss11.html b/cypress/platform/xss11.html index 51d0074d9e..8eadfa43b1 100644 --- a/cypress/platform/xss11.html +++ b/cypress/platform/xss11.html @@ -84,7 +84,7 @@ div.className = 'malware'; div.innerHTML = 'XSS Succeeded'; document.getElementsByTagName('body')[0].appendChild(div); - throw new Error('XSS Succeded'); + throw new Error('XSS Succeeded'); } var diagram = 'stateDiagram-v2\n'; @@ -103,4 +103,3 @@ - diff --git a/cypress/platform/xss12.html b/cypress/platform/xss12.html index 8cdbc88c1d..ff37285424 100644 --- a/cypress/platform/xss12.html +++ b/cypress/platform/xss12.html @@ -84,7 +84,7 @@ div.className = 'malware'; div.innerHTML = 'XSS Succeeded'; document.getElementsByTagName('body')[0].appendChild(div); - throw new Error('XSS Succeded'); + throw new Error('XSS Succeeded'); } var diagram = 'stateDiagram-v2\n'; @@ -103,4 +103,3 @@ - diff --git a/cypress/platform/xss13.html b/cypress/platform/xss13.html index ca020c218c..f3e0ecc498 100644 --- a/cypress/platform/xss13.html +++ b/cypress/platform/xss13.html @@ -84,7 +84,7 @@ div.className = 'malware'; div.innerHTML = 'XSS Succeeded'; document.getElementsByTagName('body')[0].appendChild(div); - throw new Error('XSS Succeded'); + throw new Error('XSS Succeeded'); } var diagram = 'stateDiagram-v2\n'; @@ -103,4 +103,3 @@ - diff --git a/cypress/platform/xss14.html b/cypress/platform/xss14.html index 68b61a809e..75492bbf43 100644 --- a/cypress/platform/xss14.html +++ b/cypress/platform/xss14.html @@ -84,7 +84,7 @@ div.className = 'malware'; div.innerHTML = 'XSS Succeeded'; document.getElementsByTagName('body')[0].appendChild(div); - throw new Error('XSS Succeded'); + throw new Error('XSS Succeeded'); } var diagram = 'classDiagram\n'; @@ -105,4 +105,3 @@ - diff --git a/cypress/platform/xss15.html b/cypress/platform/xss15.html index 94506def5f..1d7cfd5e7d 100644 --- a/cypress/platform/xss15.html +++ b/cypress/platform/xss15.html @@ -84,7 +84,7 @@ div.className = 'malware'; div.innerHTML = 'XSS Succeeded'; document.getElementsByTagName('body')[0].appendChild(div); - throw new Error('XSS Succeded'); + throw new Error('XSS Succeeded'); } var diagram = `sequenceDiagram @@ -104,4 +104,3 @@ - diff --git a/cypress/platform/xss16.html b/cypress/platform/xss16.html index 076ed3c347..69355aea3e 100644 --- a/cypress/platform/xss16.html +++ b/cypress/platform/xss16.html @@ -84,7 +84,7 @@ div.className = 'malware'; div.innerHTML = 'XSS Succeeded'; document.getElementsByTagName('body')[0].appendChild(div); - throw new Error('XSS Succeded'); + throw new Error('XSS Succeeded'); } var diagram = `sequenceDiagram @@ -103,4 +103,3 @@ - diff --git a/cypress/platform/xss17.html b/cypress/platform/xss17.html index 26f6a208a2..874dcb7af3 100644 --- a/cypress/platform/xss17.html +++ b/cypress/platform/xss17.html @@ -84,7 +84,7 @@ div.className = 'malware'; div.innerHTML = 'XSS Succeeded'; document.getElementsByTagName('body')[0].appendChild(div); - throw new Error('XSS Succeded'); + throw new Error('XSS Succeeded'); } var diagram = `sequenceDiagram @@ -103,4 +103,3 @@ - diff --git a/cypress/platform/xss18.html b/cypress/platform/xss18.html index 5dc7df6215..c93e603b1c 100644 --- a/cypress/platform/xss18.html +++ b/cypress/platform/xss18.html @@ -84,7 +84,7 @@ div.className = 'malware'; div.innerHTML = 'XSS Succeeded'; document.getElementsByTagName('body')[0].appendChild(div); - throw new Error('XSS Succeded'); + throw new Error('XSS Succeeded'); } var diagram = `classDiagram @@ -102,4 +102,3 @@ - diff --git a/cypress/platform/xss19.html b/cypress/platform/xss19.html index b5c5a86e99..cce0d97a40 100644 --- a/cypress/platform/xss19.html +++ b/cypress/platform/xss19.html @@ -84,7 +84,7 @@ div.className = 'malware'; div.innerHTML = 'XSS Succeeded'; document.getElementsByTagName('body')[0].appendChild(div); - throw new Error('XSS Succeded'); + throw new Error('XSS Succeeded'); } var diagram = `classDiagram @@ -104,4 +104,3 @@ - diff --git a/cypress/platform/xss2.html b/cypress/platform/xss2.html index 3f11b8f95d..73b3a26247 100644 --- a/cypress/platform/xss2.html +++ b/cypress/platform/xss2.html @@ -28,7 +28,7 @@ div.className = 'malware'; div.innerHTML = 'XSS Succeeded'; document.getElementsByTagName('body')[0].appendChild(div); - throw new Error('XSS Succeded'); + throw new Error('XSS Succeeded'); } diff --git a/cypress/platform/xss20.html b/cypress/platform/xss20.html index 33d4dfccb5..b782d52f34 100644 --- a/cypress/platform/xss20.html +++ b/cypress/platform/xss20.html @@ -84,7 +84,7 @@ div.className = 'malware'; div.innerHTML = 'XSS Succeeded'; document.getElementsByTagName('body')[0].appendChild(div); - throw new Error('XSS Succeded'); + throw new Error('XSS Succeeded'); } // var diagram = ` graph TD @@ -102,4 +102,3 @@ - diff --git a/cypress/platform/xss21.html b/cypress/platform/xss21.html index 9a88d7afa7..ed243441fd 100644 --- a/cypress/platform/xss21.html +++ b/cypress/platform/xss21.html @@ -84,7 +84,7 @@ div.className = 'malware'; div.innerHTML = 'XSS Succeeded'; document.getElementsByTagName('body')[0].appendChild(div); - throw new Error('XSS Succeded'); + throw new Error('XSS Succeeded'); } // var diagram = ` graph TD @@ -102,4 +102,3 @@ - diff --git a/cypress/platform/xss3.html b/cypress/platform/xss3.html index 015aa0e1f6..c2e1113fa5 100644 --- a/cypress/platform/xss3.html +++ b/cypress/platform/xss3.html @@ -28,7 +28,7 @@ div.className = 'malware'; div.innerHTML = 'XSS Succeeded'; document.getElementsByTagName('body')[0].appendChild(div); - throw new Error('XSS Succeded'); + throw new Error('XSS Succeeded'); } diff --git a/cypress/platform/xss5.html b/cypress/platform/xss5.html index b1fd610c68..86d45eeec3 100644 --- a/cypress/platform/xss5.html +++ b/cypress/platform/xss5.html @@ -84,7 +84,7 @@ div.className = 'malware'; div.innerHTML = 'XSS Succeeded'; document.getElementsByTagName('body')[0].appendChild(div); - throw new Error('XSS Succeded'); + throw new Error('XSS Succeeded'); } var diagram = 'graph LR\n'; diagram += 'B-->D(" - diff --git a/cypress/platform/xss6.html b/cypress/platform/xss6.html index 2205b2f067..32eca43136 100644 --- a/cypress/platform/xss6.html +++ b/cypress/platform/xss6.html @@ -84,7 +84,7 @@ div.className = 'malware'; div.innerHTML = 'XSS Succeeded'; document.getElementsByTagName('body')[0].appendChild(div); - throw new Error('XSS Succeded'); + throw new Error('XSS Succeeded'); } var diagram = 'graph LR\n'; diagram += 'A()'; @@ -98,4 +98,3 @@ - diff --git a/cypress/platform/xss7.html b/cypress/platform/xss7.html index cbf795d18d..51fcb3ddf7 100644 --- a/cypress/platform/xss7.html +++ b/cypress/platform/xss7.html @@ -84,7 +84,7 @@ div.className = 'malware'; div.innerHTML = 'XSS Succeeded'; document.getElementsByTagName('body')[0].appendChild(div); - throw new Error('XSS Succeded'); + throw new Error('XSS Succeeded'); } var diagram = 'graph LR\n'; diagram += " B( - diff --git a/cypress/platform/xss9.html b/cypress/platform/xss9.html index 6b61d5810e..7d06e988ea 100644 --- a/cypress/platform/xss9.html +++ b/cypress/platform/xss9.html @@ -84,7 +84,7 @@ div.className = 'malware'; div.innerHTML = 'XSS Succeeded'; document.getElementsByTagName('body')[0].appendChild(div); - throw new Error('XSS Succeded'); + throw new Error('XSS Succeeded'); } var diagram = 'stateDiagram-v2\n'; @@ -99,4 +99,3 @@ - diff --git a/demos/index.html b/demos/index.html index 0abe627a71..f96d2f2af9 100644 --- a/demos/index.html +++ b/demos/index.html @@ -20,6 +20,7 @@
+
C4Context title System Context diagram for Internet Banking System @@ -55,17 +56,25 @@ BiRel(SystemAA, SystemE, "Uses") Rel(SystemAA, SystemC, "Sends e-mails", "SMTP") Rel(SystemC, customerA, "Sends e-mails to") + + UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red") + UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5") + UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10") + UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50") + UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20") + + UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
C4Container title Container diagram for Internet Banking System - System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system") - Person(customer, Customer, "A customer of the bank, with personal bank accounts") + System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0") + Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0") Container_Boundary(c1, "Internet Banking") { - Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser") + Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser") Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device") Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA") ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.") @@ -76,17 +85,26 @@ System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") Rel(customer, web_app, "Uses", "HTTPS") + UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90") Rel(customer, spa, "Uses", "HTTPS") + UpdateRelStyle(customer, spa, $offsetY="-40") Rel(customer, mobile_app, "Uses") + UpdateRelStyle(customer, mobile_app, $offsetY="-30") Rel(web_app, spa, "Delivers") + UpdateRelStyle(web_app, spa, $offsetX="130") Rel(spa, backend_api, "Uses", "async, JSON/HTTPS") Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS") Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC") Rel(email_system, customer, "Sends e-mails to") + UpdateRelStyle(email_system, customer, $offsetX="-45") Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP") + UpdateRelStyle(backend_api, email_system, $offsetY="-60") Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS") + UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140") + +
@@ -99,7 +117,7 @@ System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") Container_Boundary(api, "API Application") { - Component(sign, "Sign In Controller", "MVC Rest Controlle", "Allows users to sign in to the internet banking system") + Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system") Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts") Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.") Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.") @@ -115,6 +133,18 @@ Rel(ma, sign, "Uses", "JSON/HTTPS") Rel(ma, accounts, "Uses", "JSON/HTTPS") + + UpdateRelStyle(spa, sign, $offsetY="-40") + UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40") + + UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40") + UpdateRelStyle(ma, accounts, $offsetY="-40") + + UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10") + UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10") + UpdateRelStyle(security, db, $offsetY="-40") + UpdateRelStyle(mbsfacade, mbs, $offsetY="-40") +
@@ -130,6 +160,10 @@ Rel(c1, c2, "Submits credentials to", "JSON/HTTPS") Rel(c2, c3, "Calls isAuthenticated() on") Rel(c3, c4, "select * from users where username = ?", "JDBC") + + UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40") + UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60") + UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
@@ -175,6 +209,12 @@ Rel(api, db, "Reads from and writes to", "JDBC") Rel(api, db2, "Reads from and writes to", "JDBC") Rel_R(db, db2, "Replicates data to") + + UpdateRelStyle(spa, api, $offsetY="-40") + UpdateRelStyle(web, spa, $offsetY="-40") + UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5") + UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20") + UpdateRelStyle(db, db2, $offsetY="-10")
diff --git a/docs/Configuration.md b/docs/Configuration.md index b121f3a06d..dcb50a5a97 100644 --- a/docs/Configuration.md +++ b/docs/Configuration.md @@ -5,7 +5,7 @@ Configuration is the second half of Mermaid, after deployment. Together Deployme This section will introduce the different methods of configuring of the behaviors and appearances of Mermaid Diagrams. The Following are the most commonly used methods, and are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods. -## Configuration Section in the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor). +## Configuration Section in the [Live Editor](https://mermaid.live/). ## The `initialize()` call, for when Mermaid is called via an API, or through a +