Merge branch 'master' into develop
This commit is contained in:
Knut Sveidqvist
@@ -11,10 +11,10 @@ Edit, preview and share mermaid charts/diagrams.
|
||||
|
||||
## Features
|
||||
|
||||
- edit and preview flowcharts, sequence diagrams, gantt diagrams in real time.
|
||||
- save the result as a svg
|
||||
- get a link to a viewer of the diagram so that you can share it with others.
|
||||
- get a link to edit the diagram so that someone else can tweak it and send a new link back
|
||||
- Edit and preview flowcharts, sequence diagrams, gantt diagrams in real time.
|
||||
- Save the result as a svg
|
||||
- Get a link to a viewer of the diagram so that you can share it with others.
|
||||
- Get a link to edit the diagram so that someone else can tweak it and send a new link back
|
||||
|
||||
|
||||
## Setup
|
||||
|
||||
+3
-3
@@ -2474,8 +2474,8 @@
|
||||
#editor.svelte-19z36gs{width:100%;height:400px;max-height:300px;flex:1}
|
||||
#editor-conf.svelte-1hwndan{width:100%;height:200px;max-height:300px;flex:1}
|
||||
#view.svelte-de7j0c{border:1px solor darkred;flex:1}#container.svelte-de7j0c{overflow-x:auto}.error.svelte-de7j0c{opacity:0.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}
|
||||
#card.svelte-rxu7us{border:1px solid lightgray;margin-bottom:16px}#title.svelte-rxu7us{font-family:"Playfair Display", serif;font-weight:400;border-bottom:1px solid lightgray;font-size:1.25rem;background-color:#1e60ab;color:#eaebef}#content.svelte-rxu7us{padding-top:16px}.padding.svelte-rxu7us{padding:8px}
|
||||
#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-qfww15{padding:7px;font-family:monospace;font-size:14px;width:300px}label[for="markdown"].svelte-qfww15{cursor:pointer;color:-webkit-link;color:-moz-link;color:blue;text-decoration:underline}@media(prefers-color-scheme: dark){label[for="markdown"].svelte-qfww15{color:#d8d8d8}}
|
||||
#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}
|
||||
#links.svelte-vfpbl8{margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:1px solid lightgray}#markdown.svelte-vfpbl8{padding:7px;font-family:monospace;font-size:14px;width:95%;margin:1rem 0;border:1px solid lightgray}label[for="markdown"].svelte-vfpbl8{cursor:pointer;margin:0 auto}.button-style.svelte-vfpbl8{background-color:#a2d9e2;color:#33a2c4;border-radius:0.25rem;padding:0.5rem;border:1px solid #a2d9e2;margin:0.25rem}.button-style.svelte-vfpbl8:hover{background-color:#fff;color:#33a2c4;border:1px solid #33a2c4}.button-style.svelte-vfpbl8:focus{outline:none}.link-style.svelte-vfpbl8{text-decoration:none;color:#33a2c4}#copy-section.svelte-vfpbl8{padding-top:1rem;text-align:center}
|
||||
#body.svelte-1c6upva{font-family:"Roboto", sans-serif;background-color:#fcfbfc}#editor-root.svelte-1c6upva{display:flex;height:100%}#col1.svelte-1c6upva{width:35%}#col2.svelte-1c6upva{width:65%;padding-left:32px}#link-root.svelte-1c6upva{display:flex;height:fit-content}#link-col1.svelte-1c6upva{width:50%}#link-col2.svelte-1c6upva{width:50%;padding-left:32px}#app-title.svelte-1c6upva{font-family:"Playfair Display", serif;font-size:32px;font-weight:700;margin:0;color:#1e60ab;opacity:0.8}#title-container.svelte-1c6upva{width:fit-content;margin:0 auto 16px;padding-bottom:16px}#power.svelte-1c6upva{width:100%;display:flex;justify-content:flex-end;align-items:center;height:4rem}#sampleLoader.svelte-1c6upva{padding-bottom:10px;padding-left:10px;border-bottom:1px solid lightgray}.button-container.svelte-1c6upva{margin-top:5px}.button-style.svelte-1c6upva{background-color:#a2d9e2;color:#33a2c4;border-radius:0.25rem;padding:0.5rem;border:1px solid #a2d9e2;margin:0.25rem}.button-style.svelte-1c6upva:hover{background-color:#fff;color:#33a2c4;border:1px solid #33a2c4}.button-style.svelte-1c6upva:focus{outline:none}.link-style.svelte-1c6upva{text-decoration:none;color:#33a2c4}
|
||||
#view-page.svelte-ylwsal{display:flex;height:100%}
|
||||
|
||||
+42
-98
File diff suppressed because one or more lines are too long
Generated
+187
-61
@@ -4,6 +4,123 @@
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": {
|
||||
"version": "7.10.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
|
||||
"integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
|
||||
"requires": {
|
||||
"@babel/highlight": "^7.10.4"
|
||||
}
|
||||
},
|
||||
"@babel/generator": {
|
||||
"version": "7.11.6",
|
||||
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.6.tgz",
|
||||
"integrity": "sha512-DWtQ1PV3r+cLbySoHrwn9RWEgKMBLLma4OBQloPRyDYvc5msJM9kvTLo1YnlJd1P/ZuKbdli3ijr5q3FvAF3uA==",
|
||||
"requires": {
|
||||
"@babel/types": "^7.11.5",
|
||||
"jsesc": "^2.5.1",
|
||||
"source-map": "^0.5.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"source-map": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
|
||||
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@babel/helper-function-name": {
|
||||
"version": "7.10.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz",
|
||||
"integrity": "sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==",
|
||||
"requires": {
|
||||
"@babel/helper-get-function-arity": "^7.10.4",
|
||||
"@babel/template": "^7.10.4",
|
||||
"@babel/types": "^7.10.4"
|
||||
}
|
||||
},
|
||||
"@babel/helper-get-function-arity": {
|
||||
"version": "7.10.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz",
|
||||
"integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==",
|
||||
"requires": {
|
||||
"@babel/types": "^7.10.4"
|
||||
}
|
||||
},
|
||||
"@babel/helper-split-export-declaration": {
|
||||
"version": "7.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz",
|
||||
"integrity": "sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==",
|
||||
"requires": {
|
||||
"@babel/types": "^7.11.0"
|
||||
}
|
||||
},
|
||||
"@babel/helper-validator-identifier": {
|
||||
"version": "7.10.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz",
|
||||
"integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw=="
|
||||
},
|
||||
"@babel/highlight": {
|
||||
"version": "7.10.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
|
||||
"integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.10.4",
|
||||
"chalk": "^2.0.0",
|
||||
"js-tokens": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"@babel/parser": {
|
||||
"version": "7.11.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.5.tgz",
|
||||
"integrity": "sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q=="
|
||||
},
|
||||
"@babel/template": {
|
||||
"version": "7.10.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz",
|
||||
"integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==",
|
||||
"requires": {
|
||||
"@babel/code-frame": "^7.10.4",
|
||||
"@babel/parser": "^7.10.4",
|
||||
"@babel/types": "^7.10.4"
|
||||
}
|
||||
},
|
||||
"@babel/traverse": {
|
||||
"version": "7.11.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.11.5.tgz",
|
||||
"integrity": "sha512-EjiPXt+r7LiCZXEfRpSJd+jUMnBd4/9OUv7Nx3+0u9+eimMwJmG0Q98lw4/289JCoxSE8OolDMNZaaF/JZ69WQ==",
|
||||
"requires": {
|
||||
"@babel/code-frame": "^7.10.4",
|
||||
"@babel/generator": "^7.11.5",
|
||||
"@babel/helper-function-name": "^7.10.4",
|
||||
"@babel/helper-split-export-declaration": "^7.11.0",
|
||||
"@babel/parser": "^7.11.5",
|
||||
"@babel/types": "^7.11.5",
|
||||
"debug": "^4.1.0",
|
||||
"globals": "^11.1.0",
|
||||
"lodash": "^4.17.19"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
|
||||
"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
|
||||
"requires": {
|
||||
"ms": "^2.1.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@babel/types": {
|
||||
"version": "7.11.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
|
||||
"integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.10.4",
|
||||
"lodash": "^4.17.19",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"@braintree/sanitize-url": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-3.1.0.tgz",
|
||||
@@ -308,7 +425,6 @@
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
|
||||
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-convert": "^1.9.0"
|
||||
}
|
||||
@@ -468,6 +584,19 @@
|
||||
"integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
|
||||
"dev": true
|
||||
},
|
||||
"babel-eslint": {
|
||||
"version": "10.1.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
|
||||
"integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
|
||||
"requires": {
|
||||
"@babel/code-frame": "^7.0.0",
|
||||
"@babel/parser": "^7.7.0",
|
||||
"@babel/traverse": "^7.7.0",
|
||||
"@babel/types": "^7.7.0",
|
||||
"eslint-visitor-keys": "^1.0.0",
|
||||
"resolve": "^1.12.0"
|
||||
}
|
||||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
|
||||
@@ -860,7 +989,6 @@
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
|
||||
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^3.2.1",
|
||||
"escape-string-regexp": "^1.0.5",
|
||||
@@ -871,7 +999,6 @@
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "^3.0.0"
|
||||
}
|
||||
@@ -1057,7 +1184,6 @@
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-name": "1.1.3"
|
||||
}
|
||||
@@ -1065,8 +1191,7 @@
|
||||
"color-name": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
|
||||
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
|
||||
"dev": true
|
||||
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
|
||||
},
|
||||
"commander": {
|
||||
"version": "2.20.3",
|
||||
@@ -1273,14 +1398,6 @@
|
||||
"randomfill": "^1.0.3"
|
||||
}
|
||||
},
|
||||
"crypto-random-string": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-3.2.0.tgz",
|
||||
"integrity": "sha512-8vPu5bsKaq2uKRy3OL7h1Oo7RayAWB8sYexLKAqvCXVib8SxgbmoF1IN4QMKjBv8uI8mp5gPPMbiRah25GMrVQ==",
|
||||
"requires": {
|
||||
"type-fest": "^0.8.1"
|
||||
}
|
||||
},
|
||||
"css-b64-images": {
|
||||
"version": "0.2.5",
|
||||
"resolved": "https://registry.npmjs.org/css-b64-images/-/css-b64-images-0.2.5.tgz",
|
||||
@@ -1936,13 +2053,7 @@
|
||||
"escape-string-regexp": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
|
||||
"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
|
||||
"dev": true
|
||||
},
|
||||
"escaper": {
|
||||
"version": "2.5.3",
|
||||
"resolved": "https://registry.npmjs.org/escaper/-/escaper-2.5.3.tgz",
|
||||
"integrity": "sha512-QGb9sFxBVpbzMggrKTX0ry1oiI4CSDAl9vIL702hzl1jGW8VZs7qfqTRX7WDOjoNDoEVGcEtu1ZOQgReSfT2kQ=="
|
||||
"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
|
||||
},
|
||||
"eslint-scope": {
|
||||
"version": "4.0.3",
|
||||
@@ -1954,6 +2065,11 @@
|
||||
"estraverse": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"eslint-visitor-keys": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
|
||||
"integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ=="
|
||||
},
|
||||
"esrecurse": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz",
|
||||
@@ -3072,6 +3188,11 @@
|
||||
"which": "^1.2.14"
|
||||
}
|
||||
},
|
||||
"globals": {
|
||||
"version": "11.12.0",
|
||||
"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
|
||||
"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
|
||||
},
|
||||
"globby": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
|
||||
@@ -3130,8 +3251,7 @@
|
||||
"has-flag": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
|
||||
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
|
||||
"dev": true
|
||||
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
|
||||
},
|
||||
"has-value": {
|
||||
"version": "1.0.0",
|
||||
@@ -3616,11 +3736,6 @@
|
||||
"has": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"is-regexp": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
|
||||
"integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk="
|
||||
},
|
||||
"is-stream": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
|
||||
@@ -3662,6 +3777,16 @@
|
||||
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
|
||||
"integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw=="
|
||||
},
|
||||
"js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
|
||||
},
|
||||
"jsesc": {
|
||||
"version": "2.5.2",
|
||||
"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
|
||||
"integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
|
||||
},
|
||||
"json-lint": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/json-lint/-/json-lint-0.1.0.tgz",
|
||||
@@ -3703,6 +3828,11 @@
|
||||
"nomnom": "^1.5.x"
|
||||
}
|
||||
},
|
||||
"khroma": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/khroma/-/khroma-1.1.0.tgz",
|
||||
"integrity": "sha512-aTO+YX22tYOLEQJYFiatAj1lc5QZ+H5sHWFRBWNCiKwc5NWNUJZyeSeiHEPeURJ2a1GEVYcmyMUwGjjLe5ec5A=="
|
||||
},
|
||||
"killable": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
|
||||
@@ -3862,21 +3992,22 @@
|
||||
"dev": true
|
||||
},
|
||||
"mermaid": {
|
||||
"version": "8.6.4",
|
||||
"resolved": "https://registry.npmjs.org/mermaid/-/mermaid-8.6.4.tgz",
|
||||
"integrity": "sha512-Qewo/SNV6w16i3VishQ2U+yz3KprHwXMr17b/T0980eAEk5kl4ksMgMID3h68EqsT9GLQe/P6j2G8qwJHD929A==",
|
||||
"version": "8.8.0",
|
||||
"resolved": "https://registry.npmjs.org/mermaid/-/mermaid-8.8.0.tgz",
|
||||
"integrity": "sha512-SbMzt5T6+XMkHRUECHUneq26H8bvjF752YZCKCJ4G8UU7qI2OmmxYdj4ZJnda7JIx3EuNeN4xSLuLCBJ5ByzSQ==",
|
||||
"requires": {
|
||||
"@braintree/sanitize-url": "^3.1.0",
|
||||
"crypto-random-string": "^3.0.1",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"d3": "^5.7.0",
|
||||
"dagre": "^0.8.4",
|
||||
"dagre-d3": "^0.6.4",
|
||||
"entity-decode": "^2.0.2",
|
||||
"graphlib": "^2.1.7",
|
||||
"he": "^1.2.0",
|
||||
"khroma": "^1.1.0",
|
||||
"minify": "^4.1.1",
|
||||
"moment-mini": "^2.22.1",
|
||||
"scope-css": "^1.2.1"
|
||||
"stylis": "^3.5.2"
|
||||
}
|
||||
},
|
||||
"methods": {
|
||||
@@ -4580,6 +4711,11 @@
|
||||
"integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=",
|
||||
"dev": true
|
||||
},
|
||||
"path-parse": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
|
||||
"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
|
||||
},
|
||||
"path-to-regexp": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-2.2.1.tgz",
|
||||
@@ -5026,6 +5162,14 @@
|
||||
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
|
||||
"dev": true
|
||||
},
|
||||
"resolve": {
|
||||
"version": "1.17.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
|
||||
"integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
|
||||
"requires": {
|
||||
"path-parse": "^1.0.6"
|
||||
}
|
||||
},
|
||||
"resolve-cwd": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz",
|
||||
@@ -5146,16 +5290,6 @@
|
||||
"ajv-keywords": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"scope-css": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/scope-css/-/scope-css-1.2.1.tgz",
|
||||
"integrity": "sha512-UjLRmyEYaDNiOS673xlVkZFlVCtckJR/dKgr434VMm7Lb+AOOqXKdAcY7PpGlJYErjXXJzKN7HWo4uRPiZZG0Q==",
|
||||
"requires": {
|
||||
"escaper": "^2.5.3",
|
||||
"slugify": "^1.3.1",
|
||||
"strip-css-comments": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"select-hose": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
|
||||
@@ -5427,11 +5561,6 @@
|
||||
"integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
|
||||
"dev": true
|
||||
},
|
||||
"slugify": {
|
||||
"version": "1.4.5",
|
||||
"resolved": "https://registry.npmjs.org/slugify/-/slugify-1.4.5.tgz",
|
||||
"integrity": "sha512-WpECLAgYaxHoEAJ8Q1Lo8HOs1ngn7LN7QjXgOLbmmfkcWvosyk4ZTXkTzKyhngK640USTZUlgoQJfED1kz5fnQ=="
|
||||
},
|
||||
"snapdragon": {
|
||||
"version": "0.8.2",
|
||||
"resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
|
||||
@@ -5815,14 +5944,6 @@
|
||||
"ansi-regex": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"strip-css-comments": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/strip-css-comments/-/strip-css-comments-3.0.0.tgz",
|
||||
"integrity": "sha1-elYl7/iisibPiUehElTaluE9rok=",
|
||||
"requires": {
|
||||
"is-regexp": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"strip-eof": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
|
||||
@@ -5845,6 +5966,11 @@
|
||||
"schema-utils": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"stylis": {
|
||||
"version": "3.5.4",
|
||||
"resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
|
||||
"integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
|
||||
@@ -5962,6 +6088,11 @@
|
||||
"integrity": "sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=",
|
||||
"dev": true
|
||||
},
|
||||
"to-fast-properties": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
|
||||
"integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
|
||||
},
|
||||
"to-object-path": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
|
||||
@@ -6032,11 +6163,6 @@
|
||||
"integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=",
|
||||
"dev": true
|
||||
},
|
||||
"type-fest": {
|
||||
"version": "0.8.1",
|
||||
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
|
||||
"integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA=="
|
||||
},
|
||||
"type-is": {
|
||||
"version": "1.6.18",
|
||||
"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
|
||||
|
||||
+1
-1
@@ -20,7 +20,7 @@
|
||||
"dev": "webpack-dev-server --content-base docs"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mermaid-js/mermaid": "8.8.0-preview.1082",
|
||||
"mermaid": "8.8.0",
|
||||
"js-base64": "^2.5.1",
|
||||
"json-lint": "^0.1.0",
|
||||
"jsonlint": "^1.6.3",
|
||||
|
||||
+22
-15
@@ -1,25 +1,32 @@
|
||||
<script>
|
||||
import Router from 'svelte-spa-router'
|
||||
// Used for SSR. A falsy value is ignored by the Router.
|
||||
import Edit from './routes/Edit.svelte'
|
||||
import View from './routes/View.svelte'
|
||||
import Router from "svelte-spa-router";
|
||||
// Used for SSR. A falsy value is ignored by the Router.
|
||||
import Edit from "./routes/Edit.svelte";
|
||||
import View from "./routes/View.svelte";
|
||||
|
||||
const routes = {
|
||||
// Exact path
|
||||
'/': Edit,
|
||||
// Exact path
|
||||
"/": Edit,
|
||||
|
||||
// Using named parameters, with last being optional
|
||||
'/edit/:data': Edit,
|
||||
// Using named parameters, with last being optional
|
||||
"/edit/:data": Edit,
|
||||
|
||||
// Wildcard parameter
|
||||
'/view/:data': View,
|
||||
// Wildcard parameter
|
||||
"/view/:data": View,
|
||||
|
||||
// Catch-all
|
||||
// This is optional, but if present it must be the last
|
||||
'*': Edit,
|
||||
}
|
||||
// Catch-all
|
||||
// This is optional, but if present it must be the last
|
||||
"*": Edit,
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<Router {routes}/>
|
||||
|
||||
<svelte:head>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
|
||||
rel="stylesheet" />
|
||||
</svelte:head>
|
||||
<Router {routes} />
|
||||
|
||||
+29
-24
@@ -1,31 +1,36 @@
|
||||
<script>
|
||||
export let title = '';
|
||||
export let noPadding = false;
|
||||
let contentClass = 'padding';
|
||||
if (noPadding) {
|
||||
contentClass = '';
|
||||
}
|
||||
export let title = "";
|
||||
export let noPadding = false;
|
||||
let contentClass = "padding";
|
||||
if (noPadding) {
|
||||
contentClass = "";
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#card {
|
||||
border: 1px solid lightgray;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
#title {
|
||||
border-bottom: 1px solid lightgray;
|
||||
}
|
||||
#content {
|
||||
padding-top: 16px;
|
||||
}
|
||||
.padding {
|
||||
padding: 16px;
|
||||
}
|
||||
#card {
|
||||
border: 1px solid lightgray;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
#title {
|
||||
font-family: "Playfair Display", serif;
|
||||
font-weight: 400;
|
||||
border-bottom: 1px solid lightgray;
|
||||
font-size: 1.25rem;
|
||||
background-color: #1e60ab;
|
||||
color: #eaebef;
|
||||
}
|
||||
#content {
|
||||
padding-top: 16px;
|
||||
}
|
||||
.padding {
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="card">
|
||||
<div id="title" class="padding">{title}</div>
|
||||
<div id="content" class="{contentClass}">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div id="title" class="padding">{title}</div>
|
||||
<div id="content" class={contentClass}>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+121
-76
@@ -1,13 +1,12 @@
|
||||
<script>
|
||||
import { codeErrorStore } from '../code-error-store.js';
|
||||
import {link} from 'svelte-spa-router';
|
||||
import { Base64 } from 'js-base64'
|
||||
import { onMount } from 'svelte';
|
||||
import moment from 'moment';
|
||||
import { codeStore } from '../code-store.js';
|
||||
import { codeErrorStore } from "../code-error-store.js";
|
||||
import { link } from "svelte-spa-router";
|
||||
import { Base64 } from "js-base64";
|
||||
import { onMount } from "svelte";
|
||||
import moment from "moment";
|
||||
import { codeStore } from "../code-store.js";
|
||||
|
||||
onMount(async () => {
|
||||
});
|
||||
onMount(async () => {});
|
||||
|
||||
export const onDownloadPNG = event => {
|
||||
var canvas = document.createElement('canvas');
|
||||
@@ -33,35 +32,41 @@ export const onDownloadPNG = event => {
|
||||
image.onload = function () {
|
||||
context.drawImage(image, 0, 0, canvas.width, canvas.height);
|
||||
|
||||
var a = document.createElement('a')
|
||||
a.download = `mermaid-diagram-${moment().format('YYYYMMDDHHmmss')}.png`;
|
||||
a.href = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
|
||||
a.click();
|
||||
}
|
||||
var a = document.createElement("a");
|
||||
a.download = `mermaid-diagram-${moment().format(
|
||||
"YYYYMMDDHHmmss"
|
||||
)}.png`;
|
||||
a.href = canvas
|
||||
.toDataURL("image/png")
|
||||
.replace("image/png", "image/octet-stream");
|
||||
a.click();
|
||||
};
|
||||
|
||||
console.warn('SVG', container.innerHTML);
|
||||
image.src = `data:image/svg+xml;base64,${Base64.encode(container.innerHTML)}`;
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
event.target.download = `mermaid-diagram-${moment().format(
|
||||
'YYYYMMDDHHmmss'
|
||||
)}.png`;
|
||||
};
|
||||
export const onDownloadSVG = event => {
|
||||
console.log('event', event.target);
|
||||
const container = document.getElementById('container');
|
||||
event.target.href = `data:image/svg+xml;base64,${Base64.encode(
|
||||
container.innerHTML
|
||||
)}`
|
||||
event.target.download = `mermaid-diagram-${moment().format(
|
||||
'YYYYMMDDHHmmss'
|
||||
)}.svg`
|
||||
console.log('event', event);
|
||||
};
|
||||
export const onCopyMarkdown = event => {
|
||||
event.target.select();
|
||||
document.execCommand('Copy');
|
||||
}
|
||||
console.warn("SVG", container.innerHTML);
|
||||
image.src = `data:image/svg+xml;base64,${Base64.encode(
|
||||
container.innerHTML
|
||||
)}`;
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
event.target.download = `mermaid-diagram-${moment().format(
|
||||
"YYYYMMDDHHmmss"
|
||||
)}.png`;
|
||||
};
|
||||
export const onDownloadSVG = (event) => {
|
||||
console.log("event", event.target);
|
||||
const container = document.getElementById("container");
|
||||
event.target.href = `data:image/svg+xml;base64,${Base64.encode(
|
||||
container.innerHTML
|
||||
)}`;
|
||||
event.target.download = `mermaid-diagram-${moment().format(
|
||||
"YYYYMMDDHHmmss"
|
||||
)}.svg`;
|
||||
console.log("event", event);
|
||||
};
|
||||
export const onCopyMarkdown = (event) => {
|
||||
event.target.select();
|
||||
document.execCommand("Copy");
|
||||
};
|
||||
|
||||
let url = '/mermaid-live-editor/#/view';
|
||||
let b64Code;
|
||||
@@ -72,52 +77,92 @@ let imagemodeselected = "auto";
|
||||
let userimagewidth = 1920;
|
||||
let userimageheight = 1080;
|
||||
|
||||
const unsubscribe = codeStore.subscribe(state => {
|
||||
b64Code = Base64.encodeURI(JSON.stringify(state));
|
||||
url = `/mermaid-live-editor/#/view/${b64Code}`;
|
||||
iUrl = `https://mermaid.ink/img/${b64Code}`;
|
||||
svgUrl = `https://mermaid.ink/svg/${b64Code}`;
|
||||
mdCode = `[](${window.location.protocol}//${window.location.host}${window.location.pathname}#/edit/${b64Code})`;
|
||||
});
|
||||
const unsubscribe = codeStore.subscribe((state) => {
|
||||
b64Code = Base64.encodeURI(JSON.stringify(state));
|
||||
url = `/mermaid-live-editor/#/view/${b64Code}`;
|
||||
iUrl = `https://mermaid.ink/img/${b64Code}`;
|
||||
svgUrl = `https://mermaid.ink/svg/${b64Code}`;
|
||||
mdCode = `[](${window.location.protocol}//${window.location.host}${window.location.pathname}#/edit/${b64Code})`;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#markdown {
|
||||
padding: 7px;
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
width: 300px;
|
||||
}
|
||||
label[for="markdown"] {
|
||||
cursor: pointer;
|
||||
color: -webkit-link;
|
||||
color: -moz-link;
|
||||
color: blue;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
label[for="markdown"] {
|
||||
color: #d8d8d8;
|
||||
}
|
||||
}
|
||||
#links {
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid lightgray;
|
||||
}
|
||||
#markdown {
|
||||
padding: 7px;
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
width: 95%;
|
||||
margin: 1rem 0;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
label[for="markdown"] {
|
||||
cursor: pointer;
|
||||
margin: 0 auto;
|
||||
}
|
||||
/*
|
||||
@media (prefers-color-scheme: dark) {
|
||||
label[for="markdown"] {
|
||||
color: #d8d8d8;
|
||||
}
|
||||
} */
|
||||
.button-style {
|
||||
background-color: #a2d9e2;
|
||||
color: #33a2c4;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #a2d9e2;
|
||||
margin: 0.25rem;
|
||||
}
|
||||
.button-style:hover {
|
||||
background-color: #fff;
|
||||
color: #33a2c4;
|
||||
border: 1px solid #33a2c4;
|
||||
}
|
||||
.button-style:focus {
|
||||
outline: none;
|
||||
}
|
||||
.link-style {
|
||||
text-decoration: none;
|
||||
color: #33a2c4;
|
||||
}
|
||||
#copy-section {
|
||||
padding-top: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="links" >
|
||||
<a href="{url}" use:link>Link to view</a>
|
||||
<a href="{url}" download='' on:click={onDownloadSVG}>
|
||||
Download SVG
|
||||
</a>
|
||||
<a href={iUrl}>Link to Image</a>
|
||||
<a href={svgUrl}>Link to SVG</a>
|
||||
<a href="{url}" download='' on:click={onDownloadPNG}>
|
||||
Download PNG
|
||||
</a>
|
||||
(markdown is base64 encoded for these urls)
|
||||
<div id="links">
|
||||
<button class="button-style">
|
||||
<a class="link-style" href={url} use:link>Link to view</a>
|
||||
</button>
|
||||
<button class="button-style">
|
||||
<a class="link-style" href={url} download="" on:click={onDownloadSVG}>
|
||||
Download SVG
|
||||
</a>
|
||||
</button>
|
||||
<button class="button-style">
|
||||
<a class="link-style" href={iUrl}>Link to Image</a>
|
||||
</button>
|
||||
<button class="button-style">
|
||||
<a class="link-style" href={svgUrl}>Link to SVG</a>
|
||||
</button>
|
||||
<button class="button-style">
|
||||
<a class="link-style" href={url} download="" on:click={onDownloadPNG}>
|
||||
Download PNG
|
||||
</a>
|
||||
</button>
|
||||
(markdown is base64 encoded for these urls)
|
||||
</div>
|
||||
<div id="copy-section">
|
||||
<label for="markdown" class="button-style">Copy Markdown</label>
|
||||
<br />
|
||||
<input id="markdown" type="text" value={mdCode} on:click={onCopyMarkdown} />
|
||||
</div>
|
||||
<p>
|
||||
<label for="markdown">Copy Markdown</label>
|
||||
<input id="markdown" type="text" value="{mdCode}" on:click={onCopyMarkdown} />
|
||||
</p>
|
||||
<p>
|
||||
<label>PNG size:</label>
|
||||
<input type="radio" value="auto" id="autosize" bind:group={imagemodeselected}>
|
||||
|
||||
+314
-243
@@ -1,249 +1,320 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { updateCodeStore } from '../code-store.js';
|
||||
import Editor from '../components/Editor.svelte';
|
||||
import Config from '../components/Config.svelte';
|
||||
import View from '../components/View.svelte';
|
||||
import Card from '../components/Card.svelte';
|
||||
import Tag from '../components/Tag.svelte';
|
||||
import Links from '../components/Links.svelte';
|
||||
import { fromUrl } from '../code-store.js';
|
||||
// import pkg from '@mermaid-js/mermaid/package.json'
|
||||
import pkg from '@mermaid/package.json'
|
||||
|
||||
export let mermaidVersion = pkg.version
|
||||
|
||||
onMount(async () => {
|
||||
ga('send', 'pageview');
|
||||
ga('send', 'event', 'version', mermaidVersion, mermaidVersion);
|
||||
fromUrl(params.data);
|
||||
});
|
||||
|
||||
// export let code = '';
|
||||
// export let classes = '';
|
||||
|
||||
// export let error = {};
|
||||
// export let token = '';
|
||||
// export let expected = '';
|
||||
export let params = {};
|
||||
|
||||
function loadFlowChart(){
|
||||
loadSampleDiagram('FlowChart');
|
||||
}
|
||||
function loadSequenceDiagram(){
|
||||
loadSampleDiagram('SequenceDiagram');
|
||||
}
|
||||
function loadClassDiagram(){
|
||||
loadSampleDiagram('ClassDiagram');
|
||||
}
|
||||
function loadStateDiagram(){
|
||||
loadSampleDiagram('StateDiagram');
|
||||
}
|
||||
function loadGanttChart(){
|
||||
loadSampleDiagram('GanttChart');
|
||||
}
|
||||
function loadPieChart(){
|
||||
loadSampleDiagram('PieChart');
|
||||
}
|
||||
function loadERDiagram(){
|
||||
loadSampleDiagram('ERDiagram');
|
||||
}
|
||||
|
||||
function loadSampleDiagram(diagramType){
|
||||
let code =''
|
||||
switch(diagramType){
|
||||
case 'FlowChart' :
|
||||
code = `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]
|
||||
`;
|
||||
break;
|
||||
|
||||
case 'SequenceDiagram' :
|
||||
code = `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!
|
||||
`;
|
||||
break;
|
||||
|
||||
case 'ClassDiagram' :
|
||||
code = `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()
|
||||
}
|
||||
`;
|
||||
break;
|
||||
|
||||
case 'StateDiagram' :
|
||||
code = `stateDiagram
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
`;
|
||||
break;
|
||||
|
||||
case 'GanttChart' :
|
||||
code = `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
|
||||
`;
|
||||
break;
|
||||
|
||||
case 'PieChart' :
|
||||
code = `pie title Pets adopted by volunteers
|
||||
"Dogs" : 386
|
||||
"Cats" : 85
|
||||
"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);
|
||||
|
||||
}
|
||||
|
||||
import { onMount } from "svelte";
|
||||
import { updateCodeStore } from "../code-store.js";
|
||||
import Editor from "../components/Editor.svelte";
|
||||
import Config from "../components/Config.svelte";
|
||||
import View from "../components/View.svelte";
|
||||
import Card from "../components/Card.svelte";
|
||||
import Tag from "../components/Tag.svelte";
|
||||
import Links from "../components/Links.svelte";
|
||||
import { fromUrl } from "../code-store.js";
|
||||
// import pkg from '@mermaid-js/mermaid/package.json'
|
||||
import pkg from "@mermaid/package.json";
|
||||
export let mermaidVersion = pkg.version;
|
||||
onMount(async () => {
|
||||
ga("send", "pageview");
|
||||
ga("send", "event", "version", mermaidVersion, mermaidVersion);
|
||||
fromUrl(params.data);
|
||||
});
|
||||
// export let code = '';
|
||||
// export let classes = '';
|
||||
// export let error = {};
|
||||
// export let token = '';
|
||||
// export let expected = '';
|
||||
export let params = {};
|
||||
function loadFlowChart() {
|
||||
loadSampleDiagram("FlowChart");
|
||||
}
|
||||
function loadSequenceDiagram() {
|
||||
loadSampleDiagram("SequenceDiagram");
|
||||
}
|
||||
function loadClassDiagram() {
|
||||
loadSampleDiagram("ClassDiagram");
|
||||
}
|
||||
function loadStateDiagram() {
|
||||
loadSampleDiagram("StateDiagram");
|
||||
}
|
||||
function loadGanttChart() {
|
||||
loadSampleDiagram("GanttChart");
|
||||
}
|
||||
function loadPieChart() {
|
||||
loadSampleDiagram("PieChart");
|
||||
}
|
||||
function loadERDiagram() {
|
||||
loadSampleDiagram("ERDiagram");
|
||||
}
|
||||
function loadSampleDiagram(diagramType) {
|
||||
let code = "";
|
||||
switch (diagramType) {
|
||||
case "FlowChart":
|
||||
code = `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]
|
||||
`;
|
||||
break;
|
||||
case "SequenceDiagram":
|
||||
code = `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!
|
||||
`;
|
||||
break;
|
||||
case "ClassDiagram":
|
||||
code = `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()
|
||||
}
|
||||
`;
|
||||
break;
|
||||
case "StateDiagram":
|
||||
code = `stateDiagram
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
`;
|
||||
break;
|
||||
case "GanttChart":
|
||||
code = `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
|
||||
`;
|
||||
break;
|
||||
case "PieChart":
|
||||
code = `pie title Pets adopted by volunteers
|
||||
"Dogs" : 386
|
||||
"Cats" : 85
|
||||
"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>
|
||||
|
||||
<style>
|
||||
#editor-root {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#col1 {
|
||||
width: 35%;
|
||||
}
|
||||
#col2 {
|
||||
width: 65%;
|
||||
padding-left: 32px;
|
||||
}
|
||||
#app-title {
|
||||
border-bottom: 1px solid lightgrey;
|
||||
padding-bottom: 32px;
|
||||
margin-bottom: 32px;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#power {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#sampleLoader {
|
||||
padding-bottom: 10px;
|
||||
padding-left:10px;
|
||||
|
||||
}
|
||||
.botton-container{
|
||||
margin-top:5px;
|
||||
}
|
||||
|
||||
#body {
|
||||
font-family: "Roboto", sans-serif;
|
||||
background-color: #fcfbfc;
|
||||
}
|
||||
#editor-root {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
#col1 {
|
||||
width: 35%;
|
||||
}
|
||||
#col2 {
|
||||
width: 65%;
|
||||
padding-left: 32px;
|
||||
}
|
||||
#link-root {
|
||||
display: flex;
|
||||
height: fit-content;
|
||||
}
|
||||
#link-col1 {
|
||||
width: 50%;
|
||||
}
|
||||
#link-col2 {
|
||||
width: 50%;
|
||||
padding-left: 32px;
|
||||
}
|
||||
#app-title {
|
||||
font-family: "Playfair Display", serif;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: #1e60ab;
|
||||
opacity: 0.8;
|
||||
}
|
||||
#title-container {
|
||||
width: fit-content;
|
||||
margin: 0 auto 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
#power {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
height: 4rem;
|
||||
}
|
||||
#sampleLoader {
|
||||
padding-bottom: 10px;
|
||||
padding-left: 10px;
|
||||
border-bottom: 1px solid lightgray;
|
||||
}
|
||||
.button-container {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.button-style {
|
||||
background-color: #a2d9e2;
|
||||
color: #33a2c4;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #a2d9e2;
|
||||
margin: 0.25rem;
|
||||
}
|
||||
.button-style:hover {
|
||||
background-color: #fff;
|
||||
color: #33a2c4;
|
||||
border: 1px solid #33a2c4;
|
||||
}
|
||||
.button-style:focus {
|
||||
outline: none;
|
||||
}
|
||||
.link-style {
|
||||
text-decoration: none;
|
||||
color: #33a2c4;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<h1 id="app-title">Mermaid Live Editor</h1>
|
||||
<div id="editor-root">
|
||||
<div id="col1">
|
||||
<Card title="Code" noPadding="true">
|
||||
<div id="sampleLoader">Load sample diagram :<br/>
|
||||
<div class="botton-container">
|
||||
<button on:click={loadFlowChart}>Flow Chart</button>
|
||||
<button on:click={loadSequenceDiagram}>Sequence Diagram</button>
|
||||
<button on:click={loadClassDiagram}>Class Diagram</button>
|
||||
<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}/>
|
||||
</Card>
|
||||
<Card title="Mermaid Configuration" ><Config /></Card>
|
||||
<Card title='Links'>
|
||||
<ul className='marketing-links'>
|
||||
<li>
|
||||
<a href='https://mermaid-js.github.io/mermaid' target='_blank'>
|
||||
Mermaid Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://github.com/mermaid-js/mermaid' target='_blank'>
|
||||
Mermaid on GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href='https://github.com/mermaid-js/mermaid-live-editor'
|
||||
target='_blank'
|
||||
>
|
||||
Live Editor on GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href='https://github.com/mermaid-js/mermaid-cli'
|
||||
target='_blank'
|
||||
>
|
||||
Mermaid CLI
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</Card>
|
||||
</div>
|
||||
<div id="col2">
|
||||
<Card title="Preview"><View /></Card>
|
||||
<Card title="Actions"><Links /></Card>
|
||||
<div id="power">
|
||||
Powered by mermaid <Tag color='green'>{mermaidVersion}</Tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="body">
|
||||
<div id="title-container">
|
||||
<h1 id="app-title">Mermaid Live Editor</h1>
|
||||
</div>
|
||||
<div id="editor-root">
|
||||
<div id="col1">
|
||||
<Card title="Code" noPadding="true">
|
||||
<div id="sampleLoader">
|
||||
<span id="sampleLoaderTitle">Sample Diagram Options</span>
|
||||
<br />
|
||||
<div class="button-container">
|
||||
<button class="button-style" on:click={loadFlowChart}>
|
||||
Flow Chart
|
||||
</button>
|
||||
<button
|
||||
class="button-style"
|
||||
on:click={loadSequenceDiagram}>
|
||||
Sequence Diagram
|
||||
</button>
|
||||
<button
|
||||
class="button-style"
|
||||
on:click={loadClassDiagram}>
|
||||
Class Diagram
|
||||
</button>
|
||||
<button
|
||||
class="button-style"
|
||||
on:click={loadStateDiagram}>
|
||||
State Diagram
|
||||
</button>
|
||||
<button class="button-style" on:click={loadGanttChart}>
|
||||
Gantt Chart
|
||||
</button>
|
||||
<button class="button-style" on:click={loadPieChart}>
|
||||
Pie Chart
|
||||
</button>
|
||||
<button class="button-style" on:click={loadERDiagram}>
|
||||
ER Diagram
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Editor data={params.data} />
|
||||
</Card>
|
||||
<Card title="Mermaid Configuration">
|
||||
<Config />
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
<div id="col2">
|
||||
<Card title="Preview">
|
||||
<View />
|
||||
</Card>
|
||||
<div id="link-root">
|
||||
<div id="link-col1">
|
||||
<Card title="Actions">
|
||||
<Links />
|
||||
</Card>
|
||||
</div>
|
||||
<div id="link-col2">
|
||||
<Card title="Links">
|
||||
<div class="button-container">
|
||||
<button class="button-style">
|
||||
<a
|
||||
href="https://mermaid-js.github.io/mermaid"
|
||||
target="_blank"
|
||||
class="link-style">
|
||||
Mermaid Documentation
|
||||
</a>
|
||||
</button>
|
||||
<button class="button-style">
|
||||
<a
|
||||
href="https://github.com/mermaid-js/mermaid"
|
||||
target="_blank"
|
||||
class="link-style">
|
||||
Mermaid on GitHub
|
||||
</a>
|
||||
</button>
|
||||
<button class="button-style">
|
||||
<a
|
||||
href="https://github.com/mermaid-js/mermaid-live-editor"
|
||||
target="_blank"
|
||||
class="link-style">
|
||||
Live Editor on GitHub
|
||||
</a>
|
||||
</button>
|
||||
<button class="button-style">
|
||||
<a
|
||||
href="https://github.com/mermaid-js/mermaid-cli"
|
||||
target="_blank"
|
||||
class="link-style">
|
||||
Mermaid CLI
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="power">
|
||||
Powered by mermaid
|
||||
<Tag color="green">{mermaidVersion}</Tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+2
-2
@@ -11,8 +11,8 @@ module.exports = {
|
||||
resolve: {
|
||||
alias: {
|
||||
svelte: path.resolve('node_modules', 'svelte'),
|
||||
// "@mermaid": 'mermaid'
|
||||
"@mermaid": '@mermaid-js/mermaid'
|
||||
"@mermaid": 'mermaid'
|
||||
// "@mermaid": '@mermaid-js/mermaid'
|
||||
},
|
||||
extensions: ['.mjs', '.js', '.svelte'],
|
||||
mainFields: ['svelte', 'browser', 'module', 'main']
|
||||
|
||||
Reference in New Issue
Block a user