diff --git a/README.md b/README.md
index 3759c803..da4a6bab 100644
--- a/README.md
+++ b/README.md
@@ -1,64 +1,37 @@
-# svelte app
+# mermaid-live-editor
-This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template-webpack.
+Edit, preview and share mermaid charts/diagrams.
-To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
-```bash
-npx degit sveltejs/template-webpack svelte-app
-cd svelte-app
+## 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
+
+
+## Setup
+
+Setup is simple.
+
+```
+yarn install
```
-*Note that you will need to have [Node.js](https://nodejs.org) installed.*
+## Development
-## Get started
-
-Install the dependencies...
-
-```bash
-cd svelte-app
-npm install
+```
+yarn dev
+open http://localhost:1234
```
-...then start webpack:
+This app is created with Svelte + svelte-spa-router.
+
+
+## Release
-```bash
-npm run dev
```
-
-Navigate to [localhost:8080](http://localhost:8080). You should see your app running. Edit a component file in `src`, save it, and the page should reload with your changes.
-
-
-## Deploying to the web
-
-### With [now](https://zeit.co/now)
-
-Install `now` if you haven't already:
-
-```bash
-npm install -g now
-```
-
-Then, from within your project folder:
-
-```bash
-now
-```
-
-As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon.
-
-### With [surge](https://surge.sh/)
-
-Install `surge` if you haven't already:
-
-```bash
-npm install -g surge
-```
-
-Then, from within your project folder:
-
-```bash
-npm run build
-surge public
+yarn release
```
diff --git a/package.json b/package.json
index 5c11589b..0e497dad 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
{
- "name": "svelte-app",
+ "name": "mermaid-live-editor",
"version": "1.0.0",
"devDependencies": {
"cross-env": "^5.2.0",
@@ -22,6 +22,7 @@
"json-lint": "^0.1.0",
"jsonlint": "^1.6.3",
"mermaid": "^8.4.2",
+ "moment": "^2.24.0",
"monaco-editor": "0.18.1",
"svelte-routing": "^1.4.0",
"svelte-spa-router": "^1.3.0"
diff --git a/src/components/Links.svelte b/src/components/Links.svelte
index 09b7bda7..2d81bf06 100644
--- a/src/components/Links.svelte
+++ b/src/components/Links.svelte
@@ -3,14 +3,58 @@ import { errorStore } from '../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 () => {
});
+export const onDownloadPNG = event => {
+ var canvas = document.createElement('canvas');
+ const container = document.getElementById('container');
+ const svg = document.querySelector('#container svg');
+ const box = svg.getBoundingClientRect();
+ canvas.width = box.width;
+ canvas.height = box.height;
+ const context = canvas.getContext('2d');
+ context.fillStyle = "white";
+ context.fillRect(0, 0, canvas.width, canvas.height);
+
+ var image = new Image();
+ image.onload = function () {
+ context.drawImage(image, 0, 0);
+
+ 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);
+};
+
let url = '/view';
+let iUrl;
const unsubscribe = codeStore.subscribe( state => {
url = '/#/view/' + Base64.encode(JSON.stringify(state));
+ iUrl = `https://mermaid.ink/img/${Base64.encode(JSON.stringify(state))}`;
});
@@ -33,4 +77,11 @@ const unsubscribe = codeStore.subscribe( state => {
\ No newline at end of file
diff --git a/src/components/View.svelte b/src/components/View.svelte
index 6b5a06cc..1cba72c8 100644
--- a/src/components/View.svelte
+++ b/src/components/View.svelte
@@ -62,5 +62,5 @@ let insertSvg = function(svgCode, bindFunctions){
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 2199a00b..a14d72cc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2966,6 +2966,11 @@ moment-mini@^2.22.1:
resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.22.1.tgz#bc32d73e43a4505070be6b53494b17623183420d"
integrity sha512-OUCkHOz7ehtNMYuZjNciXUfwTuz8vmF1MTbAy59ebf+ZBYZO5/tZKuChVWCX+uDo+4idJBpGltNfV8st+HwsGw==
+moment@^2.24.0:
+ version "2.24.0"
+ resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+ integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
+
monaco-editor@0.18.1:
version "0.18.1"
resolved "http://pacman01.inkclub.local:4873/monaco-editor/-/monaco-editor-0.18.1.tgz#ced7c305a23109875feeaf395a504b91f6358cfc"