Add a button to download SVG

Fixes #144
mermaid-js · Oct 24, 2015 · 9f8dedb · 9f8dedb
1 parent 62902f9
commit 9f8dedb
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/live_editor/index.html b/live_editor/index.html
@@ -62,8 +62,10 @@
         <div class="card-content">
           <span class="card-title grey-text" ng-show="showform">Generated diagram</span><br/>
           <span id="mermaidholder"></span>
-          <span ng-show="showform"><a ng-href="{{viewlink}}">LINK TO VIEW</a>
-          <span ng-show="showform"><a ng-href="{{editlink}}">LINK TO EDIT</a>
+          <span ng-show="showform">
+            <a ng-href="{{viewlink}}">LINK TO VIEW</a>
+            <a ng-href="{{editlink}}">LINK TO EDIT</a>
+            <a ng-href="{{svglink}}" download="diagram.svg">DOWNLOAD SVG</a>
           </span>
         </div>
       </div>

diff --git a/live_editor/scripts/app.js b/live_editor/scripts/app.js
@@ -9,4 +9,7 @@
  * Main module of the application.
  */
 angular
-  .module('angularMermaidApp', ['ngSanitize', 'ab-base64']);
+  .module('angularMermaidApp', ['ngSanitize', 'ab-base64'])
+  .config(['$compileProvider', function ($compileProvider) {
+    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|local|data):/);
+  }]);
diff --git a/live_editor/scripts/controllers/main.js b/live_editor/scripts/controllers/main.js
@@ -17,7 +17,9 @@ angular.module('angularMermaidApp')
       'C->> B: Response\n' +
       'B->> A: Forward response\n';
 
-    $scope.diaglink = '';
+    $scope.viewlink = '';
+    $scope.editlink = '';
+    $scope.svglink = '';
     $scope.showerror = false;
 
     $scope.checkUpdate = function() {
@@ -40,9 +42,11 @@ angular.module('angularMermaidApp')
           mermaidnode.appendChild(document.createTextNode($sce.trustAsHtml($scope.mermaidsyntax)));
           mermaidholder.appendChild(mermaidnode);
           mermaid.init(); // jshint ignore:line
+          $scope.svglink = buildSVGURL();
         } else {
           $scope.showerror = true;
         }
+        $scope.$apply();
       }, 1000);
     };
 
@@ -93,4 +97,9 @@ angular.module('angularMermaidApp')
     function buildURL(action, code) {
       return absurl + '#/' + action + '/' + base64.urlencode(code);
     }
+
+    function buildSVGURL() {
+      var svg = document.querySelector('svg').outerHTML;
+      return 'data:image/svg+xml;base64,' + base64.encode(svg);
+    }
   }]);