export makesvg

by saurabhkolhe

HTML

<script src="https://gojs.net/latest/release/go.js"></script>
<div id="sample">
<div id="myDiagramDiv" style="border: 1px solid black; width: 300px; height: 300px; position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0);"></div>
<button onclick="init()">Make SVG</button>
<div id="SVGResult"></div>
<!-- https://gojs.net/latest/samples/svgDataUrl.html -->
  
  
</div>

JavaScript

function init() {
const $ = go.GraphObject.make
  myDiagram = new go.Diagram("myDiagramDiv", {
    "undoManager.isEnabled": true, // enable undo & redo
  })

  // define a simple Node template
  /* myDiagram.nodeTemplate = new go.Node("Auto") // the Shape will go around the TextBlock
    .add(new go.Picture({ margin: 8, width: 55, height: 55 }).bind("source")) */

  myDiagram.nodeTemplate = $(
    go.Node,
    "",
    {
      selectable: true,
      selectionAdorned: false,
    },
    $(
      go.Panel,
      "Auto",
      $(
        go.Panel,
        "Table",
        $(
          go.Panel,
          "Auto",
          /* $ (go.Shape, "Rectangle", {
            fill: "yellow",
            name: "SHAPE",
            height: 40,
          }), */
         $(
            go.Picture,
            {
             visible: true,
              margin: 8,
              width: 55,
              height: 55,
            },
            new go.Binding("source", "source"),
          ),
        ),
        $(
          go.TextBlock,
          {
            textAlign: "center",
            verticalAlignment: go.Spot.Bottom,
            row: 2,
            width: 150,
            height: 20,
          },
          new go.Binding("text", "name"),
        ),
      ),
    ),
  )

  // create the model data that will be represented by Nodes and Links
  myDiagram.model = new go.GraphLinksModel(
    [
      {
        key: 1,
        text: "Alpha",
        source:
          "https://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/asteroid_blend.png",
        color: "lightblue",
      },
      {
        key: 2,
        text: "Beta",
        source:
          "https://codeskulptor-demos.commondatastorage.googleapis.com/pang/HfReHl5.jpg",
        color: "orange",
      },
      {
        key: 3,
        text: "Gamma",
        source:
          "https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back07.jpg",
        color: "lightgreen",
      },
      {
     ...