Add C4Context diagram. Compatible with C4-PlantUML syntax.
```
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, <br/> 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")
```
2022-05-15 13:21:16 +08:00
|
|
|
import c4Db from './diagrams/c4/c4Db';
|
|
|
|
import c4Renderer from './diagrams/c4/c4Renderer';
|
|
|
|
import c4Parser from './diagrams/c4/parser/c4Diagram';
|
2022-02-10 20:32:21 +01:00
|
|
|
import classDb from './diagrams/class/classDb';
|
|
|
|
import classRenderer from './diagrams/class/classRenderer';
|
|
|
|
import classRendererV2 from './diagrams/class/classRenderer-v2';
|
|
|
|
import classParser from './diagrams/class/parser/classDiagram';
|
|
|
|
import erDb from './diagrams/er/erDb';
|
|
|
|
import erRenderer from './diagrams/er/erRenderer';
|
|
|
|
import erParser from './diagrams/er/parser/erDiagram';
|
|
|
|
import flowDb from './diagrams/flowchart/flowDb';
|
|
|
|
import flowRenderer from './diagrams/flowchart/flowRenderer';
|
|
|
|
import flowRendererV2 from './diagrams/flowchart/flowRenderer-v2';
|
|
|
|
import flowParser from './diagrams/flowchart/parser/flow';
|
|
|
|
import ganttDb from './diagrams/gantt/ganttDb';
|
|
|
|
import ganttRenderer from './diagrams/gantt/ganttRenderer';
|
|
|
|
import ganttParser from './diagrams/gantt/parser/gantt';
|
|
|
|
import gitGraphAst from './diagrams/git/gitGraphAst';
|
|
|
|
import gitGraphRenderer from './diagrams/git/gitGraphRenderer';
|
|
|
|
import gitGraphParser from './diagrams/git/parser/gitGraph';
|
|
|
|
import infoDb from './diagrams/info/infoDb';
|
|
|
|
import infoRenderer from './diagrams/info/infoRenderer';
|
|
|
|
import infoParser from './diagrams/info/parser/info';
|
|
|
|
import pieParser from './diagrams/pie/parser/pie';
|
|
|
|
import pieDb from './diagrams/pie/pieDb';
|
|
|
|
import pieRenderer from './diagrams/pie/pieRenderer';
|
|
|
|
import requirementParser from './diagrams/requirement/parser/requirementDiagram';
|
|
|
|
import requirementDb from './diagrams/requirement/requirementDb';
|
|
|
|
import requirementRenderer from './diagrams/requirement/requirementRenderer';
|
|
|
|
import sequenceParser from './diagrams/sequence/parser/sequenceDiagram';
|
|
|
|
import sequenceDb from './diagrams/sequence/sequenceDb';
|
|
|
|
import sequenceRenderer from './diagrams/sequence/sequenceRenderer';
|
|
|
|
import stateParser from './diagrams/state/parser/stateDiagram';
|
|
|
|
import stateDb from './diagrams/state/stateDb';
|
|
|
|
import stateRenderer from './diagrams/state/stateRenderer';
|
|
|
|
import stateRendererV2 from './diagrams/state/stateRenderer-v2';
|
|
|
|
import journeyDb from './diagrams/user-journey/journeyDb';
|
|
|
|
import journeyRenderer from './diagrams/user-journey/journeyRenderer';
|
|
|
|
import journeyParser from './diagrams/user-journey/parser/journey';
|
|
|
|
import utils from './utils';
|
|
|
|
import * as configApi from './config';
|
|
|
|
import { log } from './logger';
|
|
|
|
|
|
|
|
class Diagram {
|
|
|
|
type = 'graph';
|
|
|
|
parser;
|
|
|
|
renderer;
|
|
|
|
db;
|
|
|
|
constructor(txt) {
|
|
|
|
const cnf = configApi.getConfig();
|
|
|
|
this.txt = txt;
|
|
|
|
this.type = utils.detectType(txt, cnf);
|
|
|
|
log.debug('Type ' + this.type);
|
|
|
|
switch (this.type) {
|
Add C4Context diagram. Compatible with C4-PlantUML syntax.
```
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, <br/> 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")
```
2022-05-15 13:21:16 +08:00
|
|
|
case 'c4':
|
|
|
|
this.parser = c4Parser;
|
|
|
|
this.parser.parser.yy = c4Db;
|
|
|
|
this.db = c4Db;
|
|
|
|
this.renderer = c4Renderer;
|
2022-07-04 22:55:11 +02:00
|
|
|
this.renderer.setConf(cnf.c4);
|
Add C4Context diagram. Compatible with C4-PlantUML syntax.
```
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, <br/> 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")
```
2022-05-15 13:21:16 +08:00
|
|
|
break;
|
2022-04-07 18:22:06 +02:00
|
|
|
case 'gitGraph':
|
2022-02-10 20:32:21 +01:00
|
|
|
this.parser = gitGraphParser;
|
|
|
|
this.parser.parser.yy = gitGraphAst;
|
|
|
|
this.db = gitGraphAst;
|
|
|
|
this.renderer = gitGraphRenderer;
|
2022-07-04 12:37:50 +02:00
|
|
|
this.txt = this.txt + '\n';
|
2022-02-10 20:32:21 +01:00
|
|
|
break;
|
|
|
|
case 'flowchart':
|
2022-07-04 12:37:50 +02:00
|
|
|
flowRenderer.setConf(cnf.flowchart);
|
|
|
|
cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
|
2022-02-10 20:32:21 +01:00
|
|
|
flowDb.clear();
|
2022-07-04 15:33:39 +02:00
|
|
|
flowDb.setGen('gen-1');
|
2022-02-10 20:32:21 +01:00
|
|
|
this.parser = flowParser;
|
|
|
|
this.parser.parser.yy = flowDb;
|
|
|
|
this.db = flowDb;
|
|
|
|
this.renderer = flowRenderer;
|
|
|
|
break;
|
|
|
|
case 'flowchart-v2':
|
2022-07-04 12:37:50 +02:00
|
|
|
flowRendererV2.setConf(cnf.flowchart);
|
|
|
|
cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
|
2022-02-10 20:32:21 +01:00
|
|
|
flowDb.clear();
|
2022-07-04 15:33:39 +02:00
|
|
|
flowDb.setGen('gen-2');
|
2022-02-10 20:32:21 +01:00
|
|
|
this.parser = flowParser;
|
|
|
|
this.parser.parser.yy = flowDb;
|
|
|
|
this.db = flowDb;
|
|
|
|
this.renderer = flowRendererV2;
|
|
|
|
break;
|
|
|
|
case 'sequenceDiagram':
|
|
|
|
case 'sequence':
|
2022-07-04 11:29:38 +02:00
|
|
|
cnf.sequence.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
|
|
|
|
if (cnf.sequenceDiagram) {
|
|
|
|
// backwards compatibility
|
|
|
|
sequenceRenderer.setConf(Object.assign(cnf.sequence, cnf.sequenceDiagram));
|
|
|
|
console.error(
|
|
|
|
'`mermaid config.sequenceDiagram` has been renamed to `config.sequence`. Please update your mermaid config.'
|
|
|
|
);
|
|
|
|
}
|
2022-02-10 20:32:21 +01:00
|
|
|
this.parser = sequenceParser;
|
|
|
|
this.parser.parser.yy = sequenceDb;
|
|
|
|
this.db = sequenceDb;
|
2022-07-04 11:29:38 +02:00
|
|
|
this.db.setWrap(cnf.wrap);
|
2022-02-10 20:32:21 +01:00
|
|
|
this.renderer = sequenceRenderer;
|
2022-07-04 22:55:11 +02:00
|
|
|
this.renderer.setConf(cnf.sequence);
|
2022-07-04 11:29:38 +02:00
|
|
|
this.txt = this.txt + '\n';
|
2022-02-10 20:32:21 +01:00
|
|
|
break;
|
|
|
|
case 'gantt':
|
2022-07-04 15:33:39 +02:00
|
|
|
cnf.gantt.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
|
2022-02-10 20:32:21 +01:00
|
|
|
this.parser = ganttParser;
|
|
|
|
this.parser.parser.yy = ganttDb;
|
|
|
|
this.db = ganttDb;
|
|
|
|
this.renderer = ganttRenderer;
|
2022-07-04 22:55:11 +02:00
|
|
|
ganttRenderer.setConf(cnf.gantt);
|
2022-02-10 20:32:21 +01:00
|
|
|
break;
|
|
|
|
case 'class':
|
2022-07-04 19:37:56 +02:00
|
|
|
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
|
2022-02-10 20:32:21 +01:00
|
|
|
this.parser = classParser;
|
|
|
|
this.parser.parser.yy = classDb;
|
|
|
|
this.db = classDb;
|
2022-07-04 19:37:56 +02:00
|
|
|
this.db.clear();
|
2022-02-10 20:32:21 +01:00
|
|
|
this.renderer = classRenderer;
|
|
|
|
break;
|
|
|
|
case 'classDiagram':
|
2022-07-04 19:37:56 +02:00
|
|
|
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
|
2022-02-10 20:32:21 +01:00
|
|
|
this.parser = classParser;
|
|
|
|
this.parser.parser.yy = classDb;
|
|
|
|
this.db = classDb;
|
2022-07-04 19:37:56 +02:00
|
|
|
this.db.clear();
|
2022-02-10 20:32:21 +01:00
|
|
|
this.renderer = classRendererV2;
|
|
|
|
break;
|
|
|
|
case 'state':
|
2022-07-04 19:37:56 +02:00
|
|
|
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
|
2022-02-10 20:32:21 +01:00
|
|
|
this.parser = stateParser;
|
|
|
|
this.parser.parser.yy = stateDb;
|
|
|
|
this.db = stateDb;
|
2022-06-26 21:05:30 +02:00
|
|
|
this.db.clear();
|
2022-02-10 20:32:21 +01:00
|
|
|
this.renderer = stateRenderer;
|
|
|
|
break;
|
|
|
|
case 'stateDiagram':
|
2022-07-04 19:37:56 +02:00
|
|
|
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
|
2022-02-10 20:32:21 +01:00
|
|
|
this.parser = stateParser;
|
|
|
|
this.parser.parser.yy = stateDb;
|
|
|
|
this.db = stateDb;
|
2022-06-26 21:05:30 +02:00
|
|
|
this.db.clear();
|
2022-02-10 20:32:21 +01:00
|
|
|
this.renderer = stateRendererV2;
|
|
|
|
break;
|
|
|
|
case 'info':
|
|
|
|
log.debug('info info info');
|
|
|
|
this.parser = infoParser;
|
|
|
|
this.parser.parser.yy = infoDb;
|
|
|
|
this.db = infoDb;
|
|
|
|
this.renderer = infoRenderer;
|
|
|
|
break;
|
|
|
|
case 'pie':
|
|
|
|
log.debug('pie');
|
|
|
|
this.parser = pieParser;
|
|
|
|
this.parser.parser.yy = pieDb;
|
|
|
|
this.db = pieDb;
|
|
|
|
this.renderer = pieRenderer;
|
|
|
|
break;
|
|
|
|
case 'er':
|
|
|
|
log.debug('er');
|
|
|
|
this.parser = erParser;
|
|
|
|
this.parser.parser.yy = erDb;
|
|
|
|
this.db = erDb;
|
|
|
|
this.renderer = erRenderer;
|
|
|
|
break;
|
|
|
|
case 'journey':
|
|
|
|
log.debug('Journey');
|
2022-07-04 18:11:58 +02:00
|
|
|
journeyRenderer.setConf(cnf.journey);
|
2022-02-10 20:32:21 +01:00
|
|
|
this.parser = journeyParser;
|
|
|
|
this.parser.parser.yy = journeyDb;
|
|
|
|
this.db = journeyDb;
|
2022-07-04 18:11:58 +02:00
|
|
|
this.db.clear();
|
2022-02-10 20:32:21 +01:00
|
|
|
this.renderer = journeyRenderer;
|
|
|
|
break;
|
|
|
|
case 'requirement':
|
|
|
|
case 'requirementDiagram':
|
|
|
|
log.debug('RequirementDiagram');
|
|
|
|
this.parser = requirementParser;
|
|
|
|
this.parser.parser.yy = requirementDb;
|
|
|
|
this.db = requirementDb;
|
|
|
|
this.renderer = requirementRenderer;
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
log.error('Unkown graphtype');
|
|
|
|
throw new Error('Unkown graphtype');
|
|
|
|
}
|
|
|
|
this.parser.parser.yy.graphType = this.type;
|
|
|
|
this.parser.parser.yy.parseError = (str, hash) => {
|
|
|
|
const error = { str, hash };
|
|
|
|
throw error;
|
|
|
|
};
|
2022-07-04 12:37:50 +02:00
|
|
|
this.parser.parse(this.txt);
|
2022-02-10 20:32:21 +01:00
|
|
|
}
|
|
|
|
getParser() {
|
|
|
|
return this.parser;
|
|
|
|
}
|
|
|
|
getType() {
|
|
|
|
return this.type;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Diagram;
|