Updated readme

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
+## Features
-npx degit sveltejs/template-webpack svelte-app
+
-cd svelte-app
+- 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
+```
-
+yarn dev
-Install the dependencies...
+open http://localhost:1234
-
-```bash
-cd svelte-app
-npm install
 ```
 
-...then start webpack:
+This app is created with Svelte + svelte-spa-router.
+
+
+## Release
 
-```bash
-npm run dev
 ```
-
+yarn release
-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
 ```

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"

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))}`;
 });
 </script>
 
@@ -33,4 +77,11 @@ const unsubscribe = codeStore.subscribe( state => {
 
 <div id="links" >
 	<a href="{url}" use:link>Link to view</a>
+	<a href="#" download='' on:click={onDownloadSVG}>
+		Download SVG
+	</a>
+	<a href={iUrl}>Link to Image</a>
+	<a href="#" download='' on:click={onDownloadPNG}>
+		Download PNG
+	</a>
 </div>

src/components/View.svelte

@@ -62,5 +62,5 @@ let insertSvg = function(svgCode, bindFunctions){
 </style>
 
 <div id="view" class="{codeClasses} {configClasses}">
-	<div bind:this={container}></div>
+	<div id="container" bind:this={container}></div>
 </div>

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"