chore: Use mermaid examples package to populate samples
This commit is contained in:
Sidharth Vinod
@@ -82,6 +82,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource-variable/recursive": "^5.2.5",
|
||||
"@mermaid-js/examples": "https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@28bdbbc",
|
||||
"@mermaid-js/layout-elk": "^0.1.7",
|
||||
"@mermaid-js/mermaid-zenuml": "^0.2.0",
|
||||
"dayjs": "^1.11.13",
|
||||
|
||||
Generated
+27
-14
@@ -11,12 +11,15 @@ importers:
|
||||
'@fontsource-variable/recursive':
|
||||
specifier: ^5.2.5
|
||||
version: 5.2.5
|
||||
'@mermaid-js/examples':
|
||||
specifier: https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@28bdbbc
|
||||
version: https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@28bdbbc
|
||||
'@mermaid-js/layout-elk':
|
||||
specifier: ^0.1.7
|
||||
version: 0.1.7(mermaid@11.6.0)
|
||||
version: 0.1.7(mermaid@https://pkg.pr.new/mermaid-js/mermaid@6453)
|
||||
'@mermaid-js/mermaid-zenuml':
|
||||
specifier: ^0.2.0
|
||||
version: 0.2.0(mermaid@11.6.0)(typescript@5.8.2)
|
||||
version: 0.2.0(mermaid@https://pkg.pr.new/mermaid-js/mermaid@6453)(typescript@5.8.2)
|
||||
dayjs:
|
||||
specifier: ^1.11.13
|
||||
version: 1.11.13
|
||||
@@ -28,7 +31,7 @@ importers:
|
||||
version: 4.17.21
|
||||
mermaid:
|
||||
specifier: ^11.6.0
|
||||
version: 11.6.0
|
||||
version: https://pkg.pr.new/mermaid-js/mermaid@6453
|
||||
mode-watcher:
|
||||
specifier: ^0.5.1
|
||||
version: 0.5.1(svelte@5.25.6)
|
||||
@@ -559,18 +562,25 @@ packages:
|
||||
'@jridgewell/trace-mapping@0.3.25':
|
||||
resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
|
||||
|
||||
'@mermaid-js/examples@https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@28bdbbc':
|
||||
resolution: {tarball: https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@28bdbbc}
|
||||
version: 0.0.1
|
||||
|
||||
'@mermaid-js/layout-elk@0.1.7':
|
||||
resolution: {integrity: sha512-G3AJ2jMaCAqky2CT3z/sf3pK5UuS3tne98GsXDl3PkKByCmPmOYmJPf+6oX5PUlV3HNWWHuSgtZ9NU/CZDSuHQ==}
|
||||
version: 0.1.7
|
||||
peerDependencies:
|
||||
mermaid: ^11.0.0
|
||||
|
||||
'@mermaid-js/mermaid-zenuml@0.2.0':
|
||||
resolution: {integrity: sha512-Lv7xNlFT5y2TIlts+yYl1HfeEgjoqw5cfSZsWYejoJvt9K0QfdPBoj5D9Tft1aN0pj1mxjuTZbZQ1Anmem/RMg==}
|
||||
version: 0.2.0
|
||||
peerDependencies:
|
||||
mermaid: '>=10.0.0'
|
||||
|
||||
'@mermaid-js/parser@0.4.0':
|
||||
resolution: {integrity: sha512-wla8XOWvQAwuqy+gxiZqY+c7FokraOTHRWMsbB4AgRx9Sy7zKslNyejy7E+a77qHfey5GXw/ik3IXv/NHMJgaA==}
|
||||
'@mermaid-js/parser@https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@34e6112fea01f771d9da8d310147855b9650d66c':
|
||||
resolution: {tarball: https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@34e6112fea01f771d9da8d310147855b9650d66c}
|
||||
version: 0.4.0
|
||||
|
||||
'@nodelib/fs.scandir@2.1.5':
|
||||
resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
|
||||
@@ -2377,8 +2387,9 @@ packages:
|
||||
resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
|
||||
engines: {node: '>= 8'}
|
||||
|
||||
mermaid@11.6.0:
|
||||
resolution: {integrity: sha512-PE8hGUy1LDlWIHWBP05SFdqUHGmRcCcK4IzpOKPE35eOw+G9zZgcnMpyunJVUEOgb//KBORPjysKndw8bFLuRg==}
|
||||
mermaid@https://pkg.pr.new/mermaid-js/mermaid@6453:
|
||||
resolution: {tarball: https://pkg.pr.new/mermaid-js/mermaid@6453}
|
||||
version: 11.6.0
|
||||
|
||||
micromatch@4.0.8:
|
||||
resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
|
||||
@@ -4067,22 +4078,24 @@ snapshots:
|
||||
'@jridgewell/resolve-uri': 3.1.2
|
||||
'@jridgewell/sourcemap-codec': 1.5.0
|
||||
|
||||
'@mermaid-js/layout-elk@0.1.7(mermaid@11.6.0)':
|
||||
'@mermaid-js/examples@https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@28bdbbc': {}
|
||||
|
||||
'@mermaid-js/layout-elk@0.1.7(mermaid@https://pkg.pr.new/mermaid-js/mermaid@6453)':
|
||||
dependencies:
|
||||
d3: 7.9.0
|
||||
elkjs: 0.9.3
|
||||
mermaid: 11.6.0
|
||||
mermaid: https://pkg.pr.new/mermaid-js/mermaid@6453
|
||||
|
||||
'@mermaid-js/mermaid-zenuml@0.2.0(mermaid@11.6.0)(typescript@5.8.2)':
|
||||
'@mermaid-js/mermaid-zenuml@0.2.0(mermaid@https://pkg.pr.new/mermaid-js/mermaid@6453)(typescript@5.8.2)':
|
||||
dependencies:
|
||||
'@zenuml/core': 3.27.12(typescript@5.8.2)
|
||||
mermaid: 11.6.0
|
||||
mermaid: https://pkg.pr.new/mermaid-js/mermaid@6453
|
||||
transitivePeerDependencies:
|
||||
- '@vue/composition-api'
|
||||
- ts-node
|
||||
- typescript
|
||||
|
||||
'@mermaid-js/parser@0.4.0':
|
||||
'@mermaid-js/parser@https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@34e6112fea01f771d9da8d310147855b9650d66c':
|
||||
dependencies:
|
||||
langium: 3.3.1
|
||||
|
||||
@@ -6080,11 +6093,11 @@ snapshots:
|
||||
|
||||
merge2@1.4.1: {}
|
||||
|
||||
mermaid@11.6.0:
|
||||
mermaid@https://pkg.pr.new/mermaid-js/mermaid@6453:
|
||||
dependencies:
|
||||
'@braintree/sanitize-url': 7.1.1
|
||||
'@iconify/utils': 2.3.0
|
||||
'@mermaid-js/parser': 0.4.0
|
||||
'@mermaid-js/parser': https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@34e6112fea01f771d9da8d310147855b9650d66c
|
||||
'@types/d3': 7.4.3
|
||||
cytoscape: 3.31.1
|
||||
cytoscape-cose-bilkent: 4.1.0(cytoscape@3.31.1)
|
||||
|
||||
@@ -1,171 +1,12 @@
|
||||
<script lang="ts">
|
||||
import Card from '$/components/Card/Card.svelte';
|
||||
import { Button } from '$/components/ui/button';
|
||||
import { getSampleDiagrams } from '$/util/mermaid';
|
||||
import { updateCode } from '$lib/util/state';
|
||||
import { logEvent } from '$lib/util/stats';
|
||||
import ShapesIcon from '~icons/material-symbols/account-tree-outline-rounded';
|
||||
|
||||
const samples = {
|
||||
Block: `block-beta
|
||||
columns 3
|
||||
doc>"Document"]:3
|
||||
space down1<[" "]>(down) space
|
||||
|
||||
block:e:3
|
||||
l["left"]
|
||||
m("A wide one in the middle")
|
||||
r["right"]
|
||||
end
|
||||
space down2<[" "]>(down) space
|
||||
db[("DB")]:3
|
||||
space:3
|
||||
D space C
|
||||
db --> D
|
||||
C --> db
|
||||
D --> C
|
||||
style m fill:#d6d,stroke:#333,stroke-width:4px
|
||||
`,
|
||||
Class: `classDiagram
|
||||
Animal <|-- Duck
|
||||
Animal <|-- Fish
|
||||
Animal <|-- Zebra
|
||||
Animal : +int age
|
||||
Animal : +String gender
|
||||
Animal: +isMammal()
|
||||
Animal: +mate()
|
||||
class Duck{
|
||||
+String beakColor
|
||||
+swim()
|
||||
+quack()
|
||||
}
|
||||
class Fish{
|
||||
-int sizeInFeet
|
||||
-canEat()
|
||||
}
|
||||
class Zebra{
|
||||
+bool is_wild
|
||||
+run()
|
||||
}`,
|
||||
ER: `erDiagram
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
CUSTOMER ||--o{ INVOICE : "liable for"
|
||||
DELIVERY-ADDRESS ||--o{ ORDER : receives
|
||||
INVOICE ||--|{ ORDER : covers
|
||||
ORDER ||--|{ ORDER-ITEM : includes
|
||||
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
|
||||
PRODUCT ||--o{ ORDER-ITEM : "ordered in"`,
|
||||
Flow: `flowchart TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
C -->|One| D[Laptop]
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[fa:fa-car Car]`,
|
||||
Gantt: `gantt
|
||||
title A Gantt Diagram
|
||||
dateFormat YYYY-MM-DD
|
||||
section Section
|
||||
A task :a1, 2014-01-01, 30d
|
||||
Another task :after a1 , 20d
|
||||
section Another
|
||||
Task in sec :2014-01-12 , 12d
|
||||
another task : 24d`,
|
||||
Git: `gitGraph
|
||||
commit
|
||||
commit
|
||||
branch develop
|
||||
checkout develop
|
||||
commit
|
||||
commit
|
||||
checkout main
|
||||
merge develop
|
||||
commit
|
||||
commit`,
|
||||
Mindmap: `mindmap
|
||||
root((mindmap))
|
||||
Origins
|
||||
Long history
|
||||
::icon(fa fa-book)
|
||||
Popularisation
|
||||
British popular psychology author Tony Buzan
|
||||
Research
|
||||
On effectiveness<br/>and features
|
||||
On Automatic creation
|
||||
Uses
|
||||
Creative techniques
|
||||
Strategic planning
|
||||
Argument mapping
|
||||
Tools
|
||||
Pen and paper
|
||||
Mermaid`,
|
||||
Packet: `---
|
||||
title: "TCP Packet"
|
||||
---
|
||||
packet-beta
|
||||
0-15: "Source Port"
|
||||
16-31: "Destination Port"
|
||||
32-63: "Sequence Number"
|
||||
64-95: "Acknowledgment Number"
|
||||
96-99: "Data Offset"
|
||||
100-105: "Reserved"
|
||||
106: "URG"
|
||||
107: "ACK"
|
||||
108: "PSH"
|
||||
109: "RST"
|
||||
110: "SYN"
|
||||
111: "FIN"
|
||||
112-127: "Window"
|
||||
128-143: "Checksum"
|
||||
144-159: "Urgent Pointer"
|
||||
160-191: "(Options and Padding)"
|
||||
192-255: "Data (variable length)"
|
||||
`,
|
||||
Pie: `pie title Pets adopted by volunteers
|
||||
"Dogs" : 386
|
||||
"Cats" : 85
|
||||
"Rats" : 15`,
|
||||
QuadrantChart: `quadrantChart
|
||||
title Reach and engagement of campaigns
|
||||
x-axis Low Reach --> High Reach
|
||||
y-axis Low Engagement --> High Engagement
|
||||
quadrant-1 We should expand
|
||||
quadrant-2 Need to promote
|
||||
quadrant-3 Re-evaluate
|
||||
quadrant-4 May be improved
|
||||
Campaign A: [0.3, 0.6]
|
||||
Campaign B: [0.45, 0.23]
|
||||
Campaign C: [0.57, 0.69]
|
||||
Campaign D: [0.78, 0.34]
|
||||
Campaign E: [0.40, 0.34]
|
||||
Campaign F: [0.35, 0.78]`,
|
||||
Sequence: `sequenceDiagram
|
||||
Alice->>+John: Hello John, how are you?
|
||||
Alice->>+John: John, can you hear me?
|
||||
John-->>-Alice: Hi Alice, I can hear you!
|
||||
John-->>-Alice: I feel great!`,
|
||||
State: `stateDiagram-v2
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]`,
|
||||
'User Journey': `journey
|
||||
title My working day
|
||||
section Go to work
|
||||
Make tea: 5: Me
|
||||
Go upstairs: 3: Me
|
||||
Do work: 1: Me, Cat
|
||||
section Go home
|
||||
Go downstairs: 5: Me
|
||||
Sit down: 3: Me`,
|
||||
XYChart: `
|
||||
xychart-beta
|
||||
title "Sales Revenue"
|
||||
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||
y-axis "Revenue (in $)" 4000 --> 11000
|
||||
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]`,
|
||||
const extras = {
|
||||
ZenUML: `zenuml
|
||||
title Order Service
|
||||
@Actor Client #FFEBE6
|
||||
@@ -192,8 +33,8 @@ packet-beta
|
||||
`
|
||||
};
|
||||
|
||||
type SampleTypes = keyof typeof samples;
|
||||
const loadSampleDiagram = (diagramType: SampleTypes): void => {
|
||||
const samples = { ...getSampleDiagrams(), ...extras } as const;
|
||||
const loadSampleDiagram = (diagramType: string): void => {
|
||||
updateCode(samples[diagramType], {
|
||||
resetPanZoom: true,
|
||||
updateDiagram: true
|
||||
@@ -201,22 +42,20 @@ packet-beta
|
||||
logEvent('loadSampleDiagram', { diagramType });
|
||||
};
|
||||
|
||||
const diagramOrder: SampleTypes[] = [
|
||||
'Flow',
|
||||
'Sequence',
|
||||
const mainDiagrams = [
|
||||
'Flowchart',
|
||||
'Class',
|
||||
'Sequence',
|
||||
'Entity Relationship',
|
||||
'State',
|
||||
'ER',
|
||||
'Gantt',
|
||||
'User Journey',
|
||||
'Git',
|
||||
'Pie',
|
||||
'Mindmap',
|
||||
'ZenUML',
|
||||
'QuadrantChart',
|
||||
'XYChart',
|
||||
'Block',
|
||||
'Packet'
|
||||
'Mindmap'
|
||||
];
|
||||
|
||||
const diagramOrder = [
|
||||
...mainDiagrams,
|
||||
...Object.keys(samples)
|
||||
.filter((key) => !mainDiagrams.includes(key))
|
||||
.sort()
|
||||
];
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { diagramData } from '@mermaid-js/examples';
|
||||
import elkLayouts from '@mermaid-js/layout-elk';
|
||||
import zenuml from '@mermaid-js/mermaid-zenuml';
|
||||
import type { MermaidConfig, RenderResult } from 'mermaid';
|
||||
@@ -39,3 +40,23 @@ export const standardizeDiagramType = (diagramType: string) => {
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
type DiagramDefinition = (typeof diagramData)[number];
|
||||
|
||||
const isValidDiagram = (diagram: DiagramDefinition): diagram is Required<DiagramDefinition> => {
|
||||
return Boolean(diagram.name && diagram.examples && diagram.examples.length > 0);
|
||||
};
|
||||
|
||||
export const getSampleDiagrams = () => {
|
||||
const diagrams = diagramData
|
||||
.filter((d) => isValidDiagram(d))
|
||||
.map(({ examples, ...rest }) => ({
|
||||
...rest,
|
||||
example: examples?.filter(({ isDefault }) => isDefault)[0]
|
||||
}));
|
||||
const examples: Record<string, string> = {};
|
||||
for (const diagram of diagrams) {
|
||||
examples[diagram.name.replace(/ (Diagram|Chart|Graph)/, '')] = diagram.example.code;
|
||||
}
|
||||
return examples;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user