forkless/mermaid-live-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding ER diagram button

Browse Source
This commit is contained in:
Knut Sveidqvist
2020-04-11 17:46:47 +02:00
parent 525fd36f69
commit 71afa0a818
4 changed files with 84 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/bundle.css
+1 -1
View File
@@ -2477,5 +2477,5 @@
#card.svelte-94c5zs{border:1px solid lightgray;margin-bottom:16px}#title.svelte-94c5zs{border-bottom:1px solid lightgray}#content.svelte-94c5zs{padding-top:16px}.padding.svelte-94c5zs{padding:16px}
#tag.svelte-kzz8td{height:auto;margin:0 8px 0 0;padding:0 7px;font-size:12px;line-height:20px;white-space:nowrap;border:1px solid #d9d9d9;border-radius:4px;cursor:default;font-size:smaller;color:#52c41a;background:#f6ffed;border-color:#b7eb8f;margin-left:8px}
#markdown.svelte-13581ad{padding:7px;font-family:monospace;font-size:14px;width:300px}label[for="markdown"].svelte-13581ad{cursor:pointer;color:-webkit-link;color:-moz-link;color:blue;text-decoration:underline}
#editor-root.svelte-1tp234s{display:flex;height:100%}#col1.svelte-1tp234s{width:35%}#col2.svelte-1tp234s{width:65%;padding-left:32px}#app-title.svelte-1tp234s{border-bottom:1px solid lightgrey;padding-bottom:32px;margin-bottom:32px;font-size:28px;font-weight:400;margin-top:0}#power.svelte-1tp234s{width:100%;display:flex;justify-content:flex-end;align-items:center}#sampleLoader.svelte-1tp234s{padding-bottom:10px;padding-left:10px}.botton-container.svelte-1tp234s{margin-top:5px}
#editor-root.svelte-1cfasmi{display:flex;height:100%}#col1.svelte-1cfasmi{width:35%}#col2.svelte-1cfasmi{width:65%;padding-left:32px}#app-title.svelte-1cfasmi{border-bottom:1px solid lightgrey;padding-bottom:32px;margin-bottom:32px;font-size:28px;font-weight:400;margin-top:0}#power.svelte-1cfasmi{width:100%;display:flex;justify-content:flex-end;align-items:center}#sampleLoader.svelte-1cfasmi{padding-bottom:10px;padding-left:10px}.botton-container.svelte-1cfasmi{margin-top:5px}
#view-page.svelte-ylwsal{display:flex;height:100%}
docs/bundle.js
+55 -27
View File
File diff suppressed because one or more lines are too long
src/routes/Edit.svelte
+25 -9
View File
@@ -45,11 +45,14 @@ onMount(async () => {
function loadPieChart(){
loadSampleDiagram('PieChart');
}
function loadERDiagram(){
loadSampleDiagram('ERDiagram');
}
function loadSampleDiagram(diagramType){
let code =''
switch(diagramType){
case 'FlowChart' :
case 'FlowChart' :
code = `graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
@@ -59,7 +62,7 @@ onMount(async () => {
`;
break;
case 'SequenceDiagram' :
case 'SequenceDiagram' :
code = `sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
@@ -68,7 +71,7 @@ onMount(async () => {
`;
break;
case 'ClassDiagram' :
case 'ClassDiagram' :
code = `classDiagram
Animal <|-- Duck
Animal <|-- Fish
@@ -93,7 +96,7 @@ onMount(async () => {
`;
break;
case 'StateDiagram' :
case 'StateDiagram' :
code = `stateDiagram
[*] --> Still
Still --> [*]
@@ -105,7 +108,7 @@ onMount(async () => {
`;
break;
case 'GanttChart' :
case 'GanttChart' :
code = `gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
@@ -125,12 +128,24 @@ onMount(async () => {
"Rats" : 15
`;
break;
case 'ERDiagram' :
code = `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"
`;
break;
}
let newState = { code, mermaid: { theme: 'default' }, updateEditor:true };
updateCodeStore(newState);
}
}
</script>
@@ -166,7 +181,7 @@ onMount(async () => {
#sampleLoader {
padding-bottom: 10px;
padding-left:10px;
}
.botton-container{
margin-top:5px;
@@ -186,6 +201,7 @@ onMount(async () => {
<button on:click={loadStateDiagram}>State Diagram</button>
<button on:click={loadGanttChart}>Gantt Chart</button>
<button on:click={loadPieChart}>Pie Chart </button>
<button on:click={loadERDiagram}>ER Diagram </button>
</div>
</div>
<Editor data={params.data}/>
yarn.lock
+3 -3
View File
@@ -8,9 +8,9 @@
integrity sha512-GcIY79elgB+azP74j8vqkiXz8xLFfIzbQJdlwOPisgbKT00tviJQuEghOXSMVxJ00HoYJbGswr4kcllUc4xCcg==
"@mermaid-js/mermaid@*":
version "8.4.7-preview.875"
resolved "https://npm.pkg.github.com/download/@mermaid-js/mermaid/8.4.7-preview.875/92abadc465b12d91b72f3a5c94e67731f0b7394d3a4054e6f25af67b443462d5#372ae0086815ae0a57276d6d205452883203cc4a"
integrity sha512-LnboLA++S0GozG6e0GrWUqDXkD/jUeDWoROEfxork5ih9Nm4R5KqGDkcoh0Td1ng0+baNXGvk9P0Z33l1OTbRQ==
version "8.5.0-preview.903"
resolved "https://npm.pkg.github.com/download/@mermaid-js/mermaid/8.5.0-preview.903/ae91face87add62113e8772dda5b3dd5c501639404a88df6dc0ef09335946453#9225e5a03647b3cf7369e0fb12645efb0d12eb89"
integrity sha512-6jg/e0p1tbGkW385haPYVSTaZ0+viRWo08QOmEfvRUns5GF2QtWBZNa0u6GqJrVLuwSnmg/HlNSUe5eJCw6j6w==
dependencies:
"@braintree/sanitize-url" "^3.1.0"
crypto-random-string "^3.0.1"