Merge remote-tracking branch 'MERMAID/develop' into chore/3922_doc-diagram-only
This commit is contained in:
commit
36c0a30c50
|
@ -13,11 +13,10 @@ on:
|
|||
- master
|
||||
pull_request:
|
||||
branches:
|
||||
- develop
|
||||
- master
|
||||
schedule:
|
||||
# * is a special character in YAML so you have to quote this string
|
||||
- cron: '30 8 * * 5'
|
||||
- cron: '30 8 * * *'
|
||||
|
||||
jobs:
|
||||
linkChecker:
|
||||
|
|
|
@ -0,0 +1,122 @@
|
|||
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
|
||||
|
||||
describe('C4 diagram', () => {
|
||||
it('should render a simple C4Context diagram', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
C4Context
|
||||
accTitle: C4 context demo
|
||||
accDescr: Many large C4 diagrams
|
||||
|
||||
title System Context diagram for Internet Banking System
|
||||
|
||||
Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
|
||||
|
||||
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
|
||||
|
||||
Enterprise_Boundary(b1, "BankBoundary") {
|
||||
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
|
||||
}
|
||||
}
|
||||
|
||||
BiRel(customerA, SystemAA, "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(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
|
||||
`,
|
||||
{}
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
it('should render a simple C4Container diagram', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
C4Container
|
||||
title Container diagram for Internet Banking System
|
||||
|
||||
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 customers via their web browser")
|
||||
}
|
||||
|
||||
Rel(customer, spa, "Uses", "HTTPS")
|
||||
Rel(email_system, customer, "Sends e-mails to")
|
||||
`,
|
||||
{}
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
it('should render a simple C4Component diagram', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
C4Component
|
||||
title Component diagram for Internet Banking System - API Application
|
||||
|
||||
Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
|
||||
|
||||
Container_Boundary(api, "API Application") {
|
||||
Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
|
||||
}
|
||||
|
||||
Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
|
||||
UpdateRelStyle(spa, sign, $offsetY="-40")
|
||||
`,
|
||||
{}
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
it('should render a simple C4Dynamic diagram', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
C4Dynamic
|
||||
title Dynamic diagram for Internet Banking System - API Application
|
||||
|
||||
ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
|
||||
Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
|
||||
Container_Boundary(b, "API Application") {
|
||||
Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
|
||||
Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
|
||||
}
|
||||
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")
|
||||
`,
|
||||
{}
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
it('should render a simple C4Deployment diagram', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
C4Deployment
|
||||
title Deployment Diagram for Internet Banking System - Live
|
||||
|
||||
Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
|
||||
Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
|
||||
}
|
||||
|
||||
Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
|
||||
Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
|
||||
Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
|
||||
Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rel(mobile, api, "Makes API calls to", "json/HTTPS")
|
||||
`,
|
||||
{}
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
});
|
|
@ -371,12 +371,12 @@ export const drawC4Shape = function (elem, c4Shape, conf) {
|
|||
textFontConf = conf[c4Shape.typeC4Shape.text + 'Font']();
|
||||
textFontConf.fontColor = fontColor;
|
||||
|
||||
if (c4Shape.thchn && c4Shape.thchn.text !== '') {
|
||||
if (c4Shape.techn && c4Shape.techn?.text !== '') {
|
||||
_drawTextCandidateFunc(conf)(
|
||||
c4Shape.thchn.text,
|
||||
c4Shape.techn.text,
|
||||
c4ShapeElem,
|
||||
c4Shape.x,
|
||||
c4Shape.y + c4Shape.thchn.Y,
|
||||
c4Shape.y + c4Shape.techn.Y,
|
||||
c4Shape.width,
|
||||
c4Shape.height,
|
||||
{ fill: fontColor, 'font-style': 'italic' },
|
||||
|
|
|
@ -21,13 +21,17 @@ hero:
|
|||
|
||||
features:
|
||||
- title: ➕ Easy to use!
|
||||
details: Mermaid allows even non-programmers to easily create detailed and diagrams through the Mermaid Live Editor.
|
||||
details: Easily create and render detailed diagrams and charts with the Mermaid Live Editor.
|
||||
link: https://mermaid.live/
|
||||
- title: 🎥 Video Tutorials!
|
||||
details: Has video tutorials for beginners and advanced users.
|
||||
- title: 🏆 Award winner!
|
||||
details: Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!!
|
||||
details: Curated list of video tutorials and examples created by the community.
|
||||
link: ../../config/Tutorials.html
|
||||
- title: 🧩 Integrations available!
|
||||
details: Use Mermaid with your favorite applications, check out the list of Integrations and Usages of Mermaid.
|
||||
details: Use Mermaid with your favorite applications, check out the integrations list.
|
||||
link: ../../misc/integrations.md
|
||||
- title: 🏆 Award winning!
|
||||
details: 2019 JavaScript Open Source Award winner for "The Most Exciting Use of Technology".
|
||||
link: https://osawards.com/javascript/2019
|
||||
---
|
||||
|
||||
<script setup>
|
||||
|
@ -159,7 +163,7 @@ const members = [
|
|||
margin: 1rem auto;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.dark .image-src{
|
||||
filter: invert(1) hue-rotate(217deg) contrast(0.72);
|
||||
|
@ -170,7 +174,7 @@ const members = [
|
|||
align-items: center;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
margin-top: 2.5rem;
|
||||
margin: 1.5rem;
|
||||
}
|
||||
|
||||
.vp-doc h2 {
|
||||
|
|
Loading…
Reference in New Issue