diff --git a/docs/bundle.css b/docs/bundle.css
index a7da7f1c..9fd1888c 100644
--- a/docs/bundle.css
+++ b/docs/bundle.css
@@ -2476,5 +2476,6 @@
 #view.svelte-1lgruaz{border:1px solor darkred;flex:1}.error.svelte-1lgruaz{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}
 #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-f0aro2{display:flex;height:100%}#col1.svelte-f0aro2{width:35%}#col2.svelte-f0aro2{width:65%;padding-left:32px}#app-title.svelte-f0aro2{border-bottom:1px solid lightgrey;padding-bottom:32px;margin-bottom:32px;font-size:28px;font-weight:400;margin-top:0}#power.svelte-f0aro2{width:100%;display:flex;justify-content:flex-end;align-items:center}
 #view-page.svelte-ylwsal{display:flex;height:100%}
diff --git a/src/code-store.js b/src/code-store.js
index c6e6ec1f..5467901d 100644
--- a/src/code-store.js
+++ b/src/code-store.js
@@ -35,5 +35,5 @@ export const fromUrl = data => {
 };
 export const updateCodeStore = newState => {
   codeStore.set(newState);
-  push('/edit/' + Base64.encode(JSON.stringify(newState)))
-};
\ No newline at end of file
+  push('/edit/' + Base64.encodeURI(JSON.stringify(newState)))
+};
diff --git a/src/components/Config.svelte b/src/components/Config.svelte
index 57572d5b..dc36da2f 100644
--- a/src/components/Config.svelte
+++ b/src/components/Config.svelte
@@ -38,7 +38,7 @@ const handleConfUpdate =  conf => {
 		console.log('Error in parsed', e);
 		configErrorStore.set(e);
 		const str = JSON.stringify({ code, mermaid: oldConf });
-		push('/edit/' + Base64.encode(str))
+		push('/edit/' + Base64.encodeURI(str))
 	}
 };
 
diff --git a/src/components/Editor.svelte b/src/components/Editor.svelte
index 56af40bb..ec1b4530 100644
--- a/src/components/Editor.svelte
+++ b/src/components/Editor.svelte
@@ -36,7 +36,7 @@ const handleCodeUpdate = code => {
 			codeErrorStore.set(e);
 			console.log('Error in parsed', e.hash);
 			const str = JSON.stringify({ code: code, mermaid: conf });
-			push('/edit/' + Base64.encode(str))
+			push('/edit/' + Base64.encodeURI(str))
 			const l = e.hash.line;
 			decArr.push(edit.deltaDecorations([], [
 				{ range: new monaco.Range(e.hash.loc.first_line,e.hash.loc.last_line,e.hash.loc.first_column,e.hash.loc.last_column), options: { inlineClassName: 'myInlineDecoration' }}]
diff --git a/src/components/Links.svelte b/src/components/Links.svelte
index 905e96c1..9abc4bc8 100644
--- a/src/components/Links.svelte
+++ b/src/components/Links.svelte
@@ -49,16 +49,36 @@ export const onDownloadSVG = event => {
 	)}.svg`
 	console.log('event', event);
 };
+export const onCopyMarkdown = event => {
+  event.target.select();
+  document.execCommand('Copy');
+}
 
 let url = '/mermaid-live-editor/#/view';
 let iUrl;
+let mdCode;
 const unsubscribe = codeStore.subscribe( state => {
-	url = '/mermaid-live-editor/#/view/' + Base64.encode(JSON.stringify(state));
-	iUrl = `https://mermaid.ink/img/${Base64.encode(JSON.stringify(state))}`;
+url = '/mermaid-live-editor/#/view/' + Base64.encodeURI(JSON.stringify(state));
+iUrl = `https://mermaid.ink/img/${Base64.encodeURI(JSON.stringify(state))}`;
+ mdCode = `[![](${iUrl})](${window.location.protocol}//${window.location.host}${window.location.pathname}#/edit/${Base64.encodeURI(JSON.stringify(state))})`;
 });
 </script>
 
-<style></style>
+<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;
+}
+</style>
 
 <div id="links" >
 	<a href="{url}" use:link>Link to view</a>
@@ -69,4 +89,8 @@ const unsubscribe = codeStore.subscribe( state => {
 	<a href="{url}" download='' on:click={onDownloadPNG}>
 		Download PNG
 	</a>
-</div>
\ No newline at end of file
+</div>
+<p>
+  <label for="markdown">Copy Markdown</label>
+  <input id="markdown" type="text" value="{mdCode}" on:click={onCopyMarkdown} />
+</p>
diff --git a/src/components/View.svelte b/src/components/View.svelte
index efc6e094..f7e1f73e 100644
--- a/src/components/View.svelte
+++ b/src/components/View.svelte
@@ -113,6 +113,9 @@ let insertSvg = function(svgCode, bindFunctions){
 		border: 1px solor darkred;
 		flex: 1;
 	}
+	#container {
+		overflow-x: auto;
+	}
 	.error {
 		opacity: 0.5;
 	}
@@ -120,4 +123,4 @@ let insertSvg = function(svgCode, bindFunctions){
 
 <div id="view" class="{codeClasses} {configClasses}">
 	<div id="container" bind:this={container}></div>
-</div>
\ No newline at end of file
+</div>