GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

test(arch): added edge arrow demo

Browse Source
This commit is contained in:
NicolasNewman 2024-04-06 21:55:06 -05:00
parent 251e808a29
commit baa6c9e4b9
2 changed files with 66 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
demos/architecture.html
View File

@ -15,6 +15,7 @@
<body> <body>
<h1>Architecture diagram demo</h1> <h1>Architecture diagram demo</h1>
<h2>Simple diagram with groups</h2> <h2>Simple diagram with groups</h2>
<pre class="mermaid"> <pre class="mermaid">
architecture architecture
@ -31,8 +32,8 @@
disk2 T--B db disk2 T--B db
server T--B gateway server T--B gateway
</pre> </pre>
<hr /> <hr />
<h2>Groups within groups</h2> <h2>Groups within groups</h2>
<pre class="mermaid"> <pre class="mermaid">
architecture architecture
@ -55,7 +56,6 @@
serv1 L--R gateway serv1 L--R gateway
</pre> </pre>
<hr /> <hr />
<h2>Default icon (?) from uknown icon name</h2> <h2>Default icon (?) from uknown icon name</h2>
@ -63,34 +63,62 @@
architecture architecture
service unknown(iconnamedoesntexist)[Uknown Icon] service unknown(iconnamedoesntexist)[Uknown Icon]
</pre> </pre>
<hr /> <hr />
<h2>Split Direction</h2>
<pre class="mermaid"> <pre class="mermaid">
architecture architecture
group vpc[Private VPC] service db(database)[Database]
group vpc2[Public VPC] service s3(storage)[Storage]
service serv1(server)[Server 1]
service serv2(server)[Server 2]
service disk(disk)[Disk]
service s3(s3)[S3 Bucket] db L--R s3
service rds(database)[RDS DB] serv1 L--T s3
service ddb(dynamodb)[DynamoDB] serv2 L--B s3
service ec2(ec2)[EC2 Server] in vpc serv1 T--B disk
service gateway(api_gateway)[API Gateway] in vpc
service docdb(documentdb)[DocumentDB]
service lambda(lambda)[Lambda] in vpc
service serv1(ec2)[Public Server] in vpc2
service serv2(ec2)[Private Server] in vpc2
serv1 L--R serv2
s3 L--R rds
s3 B--T ddb
s3 R--L docdb
gateway L--R ec2
gateway T--B rds
gateway B--T lambda
</pre> </pre>
<hr />
<h2>Arrow Tests</h2>
<pre class="mermaid">
architecture
service servC(server)[Server 1]
service servL(server)[Server 2]
service servR(server)[Server 3]
service servT(server)[Server 4]
service servB(server)[Server 5]
servC (L--R) servL
servC (R--L) servR
servC (T--B) servT
servC (B--T) servB
servL (T--L) servT
servL (B--L) servB
servR (T--R) servT
servR (B--R) servB
</pre>
<pre class="mermaid">
architecture
service servC(server)[Server 1]
service servL(server)[Server 2]
service servR(server)[Server 3]
service servT(server)[Server 4]
service servB(server)[Server 5]
servC (L--R) servL
servC (R--L) servR
servC (T--B) servT
servC (B--T) servB
servT (L--T) servL
servB (L--B) servL
servT (R--T) servR
servB (R--B) servR
</pre>
<hr />
<script type="module"> <script type="module">
import mermaid from './mermaid.esm.mjs'; import mermaid from './mermaid.esm.mjs';
@ -147,7 +175,7 @@
useMaxWidth: false, useMaxWidth: false,
}, },
architecture: { architecture: {
iconSize: 80 iconSize: 80,
}, },
useMaxWidth: false, useMaxWidth: false,
}); });

20
packages/mermaid/src/rendering-util/svgRegister.ts
View File

@ -1,16 +1,20 @@
import { Selection } from 'd3-selection'; import { Selection } from 'd3-selection';
type IconResolver = ( type IconResolver = (
parent: Selection<SVGGElement, unknown, Element | null, unknown>, width?: number parent: Selection<SVGGElement, unknown, Element | null, unknown>,
width?: number
) => Selection<SVGGElement, unknown, Element | null, unknown>; ) => Selection<SVGGElement, unknown, Element | null, unknown>;
type IconLibrary = Record<string, IconResolver>; type IconLibrary = Record<string, IconResolver>;
const createIcon = (icon: string, originalSize: number): IconResolver => { const createIcon = (icon: string, originalSize: number): IconResolver => {
return (parent: Selection<SVGGElement, unknown, Element | null, unknown>, size: number = originalSize) => { return (
parent.html(`<g style="transform: scale(${size / originalSize})">${icon}</g>`) parent: Selection<SVGGElement, unknown, Element | null, unknown>,
return parent size: number = originalSize
} ) => {
} parent.html(`<g style="transform: scale(${size / originalSize})">${icon}</g>`);
return parent;
};
};
const icons: IconLibrary = {}; const icons: IconLibrary = {};
@ -36,7 +40,7 @@ const getIcon = (name: string): IconResolver | null => {
if (isIconNameInUse(name)) { if (isIconNameInUse(name)) {
return icons[name]; return icons[name];
} }
return icons["unknown"]; return icons['unknown'];
}; };
export { registerIcon, registerIcons, getIcon, isIconNameInUse, createIcon, IconLibrary }; export { registerIcon, registerIcons, getIcon, isIconNameInUse, createIcon, IconLibrary, IconResolver };