110 lines
2.7 KiB
Svelte
110 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import { updateCode } from '$lib/util/state';
|
|
import Card from '$lib/components/card/card.svelte';
|
|
|
|
const samples = {
|
|
'Flow Chart': `graph 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]`,
|
|
'Sequence Diagram': `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!
|
|
`,
|
|
'Class Diagram': `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()
|
|
}
|
|
`,
|
|
'State Diagram': `stateDiagram-v2
|
|
[*] --> Still
|
|
Still --> [*]
|
|
Still --> Moving
|
|
Moving --> Still
|
|
Moving --> Crash
|
|
Crash --> [*]
|
|
`,
|
|
'Gantt Chart': `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
|
|
`,
|
|
'Pie Chart': `pie title Pets adopted by volunteers
|
|
"Dogs" : 386
|
|
"Cats" : 85
|
|
"Rats" : 15
|
|
`,
|
|
'ER Diagram': `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"
|
|
`,
|
|
'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
|
|
`,
|
|
'Git Graph': ` gitGraph
|
|
commit
|
|
commit
|
|
branch develop
|
|
checkout develop
|
|
commit
|
|
commit
|
|
checkout main
|
|
merge develop
|
|
commit
|
|
commit
|
|
`
|
|
};
|
|
|
|
const loadSampleDiagram = (diagramType: string): void => {
|
|
updateCode(samples[diagramType], true, true);
|
|
};
|
|
</script>
|
|
|
|
<Card title="Sample Diagrams" isOpen={false}>
|
|
<div class="flex gap-2 flex-wrap p-2">
|
|
{#each Object.keys(samples) as sample}
|
|
<button class="btn btn-primary normal-case btn-sm" on:click={() => loadSampleDiagram(sample)}
|
|
>{sample}</button>
|
|
{/each}
|
|
</div>
|
|
</Card>
|