diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js index 4dda2c16e..283a52c67 100644 --- a/cypress/integration/rendering/gitGraph.spec.js +++ b/cypress/integration/rendering/gitGraph.spec.js @@ -207,4 +207,50 @@ describe('Git Graph diagram', () => { {} ); }); + + it('12: should render commits for more than 8 branches', () => { + imgSnapshotTest( + ` + gitGraph + checkout main + commit + checkout main + branch branch1 + commit + checkout main + merge branch1 + branch branch2 + commit + checkout main + merge branch2 + branch branch3 + commit + checkout main + merge branch3 + branch branch4 + commit + checkout main + merge branch4 + branch branch5 + commit + checkout main + merge branch5 + branch branch6 + commit + checkout main + merge branch6 + branch branch7 + commit + checkout main + merge branch7 + branch branch8 + commit + checkout main + merge branch8 + branch branch9 + commit + `, + {} + ); + }); }); diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index aaf5e94ce..f1def3391 100644 --- a/cypress/integration/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -126,6 +126,17 @@ context('Sequence diagram', () => { { sequence: { noteAlign: 'left' } } ); }); + it('should render multi-line notes aligned to the left when configured', () => { + imgSnapshotTest( + ` + sequenceDiagram + Alice->>Bob: I'm short + note left of Alice: I am left aligned
but also
multiline + Bob->>Alice: Short as well + `, + { sequence: { noteAlign: 'left' } } + ); + }); it('should render notes aligned to the right when configured', () => { imgSnapshotTest( ` @@ -137,6 +148,37 @@ context('Sequence diagram', () => { { sequence: { noteAlign: 'right' } } ); }); + it('should render multi-line notes aligned to the right when configured', () => { + imgSnapshotTest( + ` + sequenceDiagram + Alice->>Bob: I'm short + note left of Alice: I am right aligned
but also
multiline + Bob->>Alice: Short as well + `, + { sequence: { noteAlign: 'right' } } + ); + }); + it('should render multi-line messages aligned to the left when configured', () => { + imgSnapshotTest( + ` + sequenceDiagram + Alice->>Bob: I'm short
but also
multiline + Bob->>Alice: Short as well
and also
multiline + `, + { sequence: { messageAlign: 'left' } } + ); + }); + it('should render multi-line messages aligned to the right when configured', () => { + imgSnapshotTest( + ` + sequenceDiagram + Alice->>Bob: I'm short
but also
multiline + Bob->>Alice: Short as well
and also
multiline + `, + { sequence: { messageAlign: 'right' } } + ); + }); }); context('auth width scaling', () => { it('should render long actor descriptions', () => { diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js index b5ab86440..946b5d31e 100644 --- a/cypress/integration/rendering/stateDiagram-v2.spec.js +++ b/cypress/integration/rendering/stateDiagram-v2.spec.js @@ -509,4 +509,16 @@ stateDiagram-v2 expect(svg).to.not.have.attr('style'); }); }); + + it('v2 should render a state diagram and set the correct length of the labels', () => { + imgSnapshotTest( + ` + stateDiagram-v2 + [*] --> 1 + 1 --> 2: test({ foo#colon; 'far' }) + 2 --> [*] + `, + { logLevel: 0, fontFamily: 'courier' } + ); + }); }); diff --git a/docs/README.md b/docs/README.md index 071c5b405..0ad50e013 100644 --- a/docs/README.md +++ b/docs/README.md @@ -30,6 +30,7 @@ Mermaid allows even non-programmers to easily create detailed and diagrams throu [Tutorials](./Tutorials.md) has video tutorials. Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./integrations.md). + For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./n00b-overview.md) and [Usage](./usage.md). 🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md) | 📜 [Version Log](./CHANGELOG.md) | 🔌 [Plug-Ins](./integrations.md) diff --git a/docs/c4c.md b/docs/c4c.md index 5af7193e3..62c19c8fd 100644 --- a/docs/c4c.md +++ b/docs/c4c.md @@ -260,7 +260,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60") 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.") @@ -364,4 +364,4 @@ UpdateRelStyle(customerA, bankA, $offsetY="60") UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20") UpdateRelStyle(db, db2, $offsetY="-10") -``` \ No newline at end of file +``` diff --git a/docs/flowchart.md b/docs/flowchart.md index 34d91063c..dfa9a1af6 100644 --- a/docs/flowchart.md +++ b/docs/flowchart.md @@ -612,12 +612,14 @@ The icons are accessed via the syntax fa:#icon class name#. ```mermaid-example flowchart TD - B["fa:fa-twitter for peace"] + B["fab:fa-twitter for peace"] B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner); B-->E(A fa:fa-camera-retro perhaps?) ``` +?> Mermaid is now only compatible with Font Awesome versions 4 and 5. Check that you are using the correct version of Font Awesome. + ## Graph declarations with spaces between vertices and link and without semicolon diff --git a/docs/index.html b/docs/index.html index 8cd2488bb..25f10dcd3 100644 --- a/docs/index.html +++ b/docs/index.html @@ -17,6 +17,7 @@ /> +