Skip to content

Commit 2a0592e

Browse files
boyney123boyney123
authored
feat(core): added icons packs for mermaid diagrams (#1049)
* feat(core): added icons packs for mermaid diagrams * Create clean-mangos-hope.md
1 parent baf84e8 commit 2a0592e

File tree

13 files changed

+167
-5
lines changed

13 files changed

+167
-5
lines changed

‎.changeset/clean-mangos-hope.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@eventcatalog/core": patch
3+
---
4+
5+
feat(core): added icons packs for mermaid diagrams

‎eventcatalog/package-lock.json

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎eventcatalog/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"@asyncapi/react-component": "^2.4.3",
2727
"@headlessui/react": "^2.0.3",
2828
"@heroicons/react": "^2.1.3",
29+
"@iconify-json/logos": "^1.2.4",
2930
"@stoplight/json-schema-viewer": "^4.7.0",
3031
"@stoplight/mosaic": "^1.53.2",
3132
"@tailwindcss/typography": "^0.5.13",

‎eventcatalog/src/pages/docs/[type]/[id]/[version]/index.astro

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
2121
import { ViewTransitions } from 'astro:transitions';
2222
import { ArrowsRightLeftIcon } from '@heroicons/react/20/solid';
2323
24+
import config from '@config';
25+
2426
type PageTypesWithFlows = PageTypes | 'flows';
2527
2628
export async function getStaticPaths() {
@@ -229,21 +231,29 @@ const badges = [getBadge(), ...contentBadges, ...getSpecificationBadges()];
229231
<style is:global>
230232
.docs-layout .prose {
231233
max-width: none;
232-
/* max-height: 80vh; */
233234
overflow: auto;
234235
}
235236

236237
.mermaid svg {
237238
margin: 1em auto 2em;
238239
}
240+
241+
/* Fix for architecture diagrams */
242+
.mermaid[data-content*='architecture'] svg {
243+
max-width: 350px !important;
244+
margin: 0;
245+
/* width: 100px !important; */
246+
}
239247
</style>
240248

241-
<script define:vars={{ props }}>
249+
<script define:vars={{ props, config }}>
242250
// Fix to pass information to componets that are client side only
243251
// and require catalog information
244252
window.eventcatalog = {};
245253
// @ts-ignore
246254
window.eventcatalog[`${props.collection}-${props.data.id}`] = props.catalog;
255+
256+
window.eventcatalog.mermaid = config.mermaid;
247257
</script>
248258

249259
<script>
@@ -260,6 +270,23 @@ const badges = [getBadge(), ...contentBadges, ...getSpecificationBadges()];
260270
*/
261271
async function renderDiagrams(graphs: any) {
262272
const { default: mermaid } = await import('mermaid');
273+
274+
if (window.eventcatalog.mermaid) {
275+
const { icons } = await import('@iconify-json/logos');
276+
const { iconPacks = [] } = window.eventcatalog.mermaid ?? {};
277+
278+
if (iconPacks.length > 0) {
279+
const iconPacksToRegister = iconPacks.map((name: string) => {
280+
return {
281+
name,
282+
icons,
283+
};
284+
});
285+
286+
mermaid.registerIconPacks(iconPacksToRegister);
287+
}
288+
}
289+
263290
mermaid.initialize({
264291
// fontSize: 2,
265292
flowchart: {
@@ -271,6 +298,9 @@ const badges = [getBadge(), ...contentBadges, ...getSpecificationBadges()];
271298
fontFamily: 'var(--sans-font)',
272299
// @ts-ignore This works, but TS expects a enum for some reason
273300
theme: 'light',
301+
architecture: {
302+
useMaxWidth: true,
303+
},
274304
});
275305

276306
for (const graph of graphs) {

‎examples/default/domains/Orders/services/InventoryService/index.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,27 @@ The Inventory Service is a critical component of the system responsible for mana
5050

5151
<NodeGraph title="Hello world" />
5252

53+
## Infrastructure
54+
55+
The Inventory Service is hosted on AWS.
56+
57+
The diagram below shows the infrastructure of the Inventory Service. The service is hosted on AWS and uses AWS Lambda to handle the inventory requests. The inventory is stored in an AWS Aurora database and the inventory metadata is stored in an AWS S3 bucket.
58+
59+
```mermaid
60+
architecture-beta
61+
group api(logos:aws)
62+
63+
service db(logos:aws-aurora)[Inventory DB] in api
64+
service disk1(logos:aws-s3)[Inventory Metadata] in api
65+
service server(logos:aws-lambda)[Inventory Handler] in api
66+
67+
db:L -- R:server
68+
disk1:T -- B:server
69+
```
70+
71+
You can find more information about the Inventory Service infrastructure in the [Inventory Service documentation](https://github.com/event-catalog/pretend-shipping-service/blob/main/README.md).
72+
73+
5374

5475
<Steps title="How to connect to Inventory Service">
5576
<Step title="Obtain API credentials">

‎examples/default/domains/Orders/services/NotificationService/index.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,4 +56,24 @@ The Notification Service is responsible for managing and delivering notification
5656
</Accordion>
5757
</AccordionGroup>
5858

59+
## Infrastructure
60+
61+
The Notification Service is hosted on AWS.
62+
63+
The diagram below shows the infrastructure of the Notification Service. The service is hosted on AWS and uses AWS Lambda to handle the notification requests. The notification is stored in an AWS Aurora database and the notification metadata is stored in an AWS S3 bucket.
64+
65+
```mermaid
66+
architecture-beta
67+
group api(logos:aws)
68+
69+
service db(logos:aws-aurora)[Notification DB] in api
70+
service disk1(logos:aws-s3)[Notification Metadata] in api
71+
service server(logos:aws-lambda)[Notification Handler] in api
72+
73+
db:L -- R:server
74+
disk1:T -- B:server
75+
```
76+
77+
You can find more information about the Notification Service infrastructure in the [Notification Service documentation](https://github.com/event-catalog/pretend-shipping-service/blob/main/README.md).
78+
5979
<Footer />

‎examples/default/domains/Orders/services/OrdersService/index.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,4 +43,24 @@ The Orders Service is responsible for managing customer orders within the system
4343

4444
<NodeGraph />
4545

46+
## Infrastructure
47+
48+
The Orders Service is hosted on AWS.
49+
50+
The diagram below shows the infrastructure of the Orders Service. The service is hosted on AWS and uses AWS Lambda to handle the order requests. The order is stored in an AWS Aurora database and the order metadata is stored in an AWS S3 bucket.
51+
52+
```mermaid
53+
architecture-beta
54+
group api(logos:aws)
55+
56+
service db(logos:aws-aurora)[Order DB] in api
57+
service disk1(logos:aws-s3)[Order Metadata] in api
58+
service server(logos:aws-lambda)[Order Handler] in api
59+
60+
db:L -- R:server
61+
disk1:T -- B:server
62+
```
63+
64+
You can find more information about the Orders Service infrastructure in the [Orders Service documentation](https://github.com/event-catalog/pretend-shipping-service/blob/main/README.md).
65+
4666
<Footer />

‎examples/default/domains/Payment/services/PaymentService/index.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,26 @@ The Payment Service is a crucial component of our system that handles all paymen
2525

2626
<NodeGraph />
2727

28+
## Infrastructure
29+
30+
The Payment Service is hosted on AWS.
31+
32+
The diagram below shows the infrastructure of the Payment Service. The service is hosted on AWS and uses AWS Lambda to handle the payment requests. The payment is stored in an AWS Aurora database and the payment metadata is stored in an AWS S3 bucket.
33+
34+
```mermaid
35+
architecture-beta
36+
group api(logos:aws)
37+
38+
service db(logos:aws-aurora)[Payment DB] in api
39+
service disk1(logos:aws-s3)[Payment Metadata] in api
40+
service server(logos:aws-lambda)[Payment Handler] in api
41+
42+
db:L -- R:server
43+
disk1:T -- B:server
44+
```
45+
46+
You can find more information about the Payment Service infrastructure in the [Payment Service documentation](https://github.com/event-catalog/pretend-payment-service/blob/main/README.md).
47+
2848
### Key Components
2949
- Payment API: Exposes endpoints for initiating payments and querying payment status.
3050
- Payment Processor: Handles the core payment processing logic.

‎examples/default/domains/Subscriptions/services/SubscriptionService/index.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,4 +41,24 @@ The subscription Service is responsible for handling customer subscriptions in o
4141

4242
<NodeGraph />
4343

44+
## Infrastructure
45+
46+
The Subscription Service is hosted on AWS.
47+
48+
The diagram below shows the infrastructure of the Subscription Service. The service is hosted on AWS and uses AWS Lambda to handle the subscription requests. The subscription is stored in an AWS Aurora database and the subscription metadata is stored in an AWS S3 bucket.
49+
50+
```mermaid
51+
architecture-beta
52+
group api(logos:aws)
53+
54+
service db(logos:aws-aurora)[Subscription DB] in api
55+
service disk1(logos:aws-s3)[Subscription Metadata] in api
56+
service server(logos:aws-lambda)[Subscription Handler] in api
57+
58+
db:L -- R:server
59+
disk1:T -- B:server
60+
```
61+
62+
You can find more information about the Subscription Service infrastructure in the [Subscription Service documentation](https://github.com/event-catalog/pretend-subscription-service/blob/main/README.md).
63+
4464
<Footer />

‎examples/default/eventcatalog.config.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,5 +32,8 @@ export default {
3232
visible: true,
3333
},
3434
},
35-
}
35+
},
36+
mermaid: {
37+
iconPacks: ['logos'],
38+
},
3639
};

‎package-lock.json

Lines changed: 11 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
"@asyncapi/react-component": "^2.4.3",
5050
"@headlessui/react": "^2.0.3",
5151
"@heroicons/react": "^2.1.3",
52+
"@iconify-json/logos": "^1.2.4",
5253
"@parcel/watcher": "^2.4.1",
5354
"@stoplight/json-schema-viewer": "^4.7.0",
5455
"@stoplight/mosaic": "^1.53.2",

‎src/eventcatalog.config.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,4 +42,7 @@ export interface Config {
4242
services?: ResourceDependency[];
4343
domains?: ResourceDependency[];
4444
};
45+
mermaid?: {
46+
iconPacks?: string[];
47+
};
4548
}

0 commit comments

Comments
 (0)