Public Information

dsl/export/c_nplus-key.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 2500 1000" style="background: #ffffff"><g transform="translate(25,100)"><rect width="450" height="300" rx="3" ry="3" x="0" y="0" fill="#424c63" stroke-width="2" stroke="#3d6fdd"/><text x="225" y="77.5" text-anchor="middle" fill="#ffffff" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">Kubernetes - cronjob,</tspan><tspan x="225" dy="40px">nplus</tspan></text><image xlink:href="https://static.structurizr.com/themes/kubernetes-v0.3/cronjob-256.png" x="195" y="172.5" width="60" height="60" opacity="1"/></g><g transform="translate(525,100)"><path id="keyKubernetes-pvcCylinderPath" d="M 0,22.5 a 225,22.5 0,0,0 450 0 a 225,22.5 0,0,0 -450 0 l 0,255 a 225,22.5 0,0,0 450 0 l 0,-255" fill="#dddddd" stroke-width="2" stroke="#3d6fdd"></path><text x="225" y="107.5" text-anchor="middle" fill="#3d6fdd" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">Kubernetes - pvc</tspan></text><image xlink:href="https://static.structurizr.com/themes/kubernetes-v0.3/pvc-256.png" x="195" y="165" width="60" height="60" opacity="1"/></g><g transform="translate(1025,100)"><rect width="450" height="300" rx="3" ry="3" x="0" y="0" fill="#424c63" stroke-width="2" stroke="#3d6fdd"/><text x="225" y="96.25" text-anchor="middle" fill="#ffffff" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">Kubernetes - sts, nplus</tspan></text><image xlink:href="https://static.structurizr.com/themes/kubernetes-v0.3/sts-256.png" x="195" y="153.75" width="60" height="60" opacity="1"/></g><g transform="translate(1525,100)"><rect width="450" height="300" rx="3" ry="3" x="0" y="0" fill="#424c63" stroke-width="2" stroke="#3b4459"/><text x="225" y="131.25" text-anchor="middle" fill="#ffffff" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">nplus</tspan></text></g><g transform="translate(2025,25)"><rect x="0" y="180" width="450" height="270" rx="90" fill="#dddddd" stroke-width="2" stroke="#c7c7c7"/><circle cx="225" cy="100" r="100" fill="#dddddd" stroke-width="2" stroke="#c7c7c7"/><line x1="90" y1="300" x2="90" y2="450" stroke-width="2" stroke="#c7c7c7"/><line x1="360" y1="300" x2="360" y2="450" stroke-width="2" stroke="#c7c7c7"/><text x="225" y="256.25" text-anchor="middle" fill="#000000" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">Person</tspan></text></g><g transform="translate(25,600)"><rect width="450" height="300" rx="10" ry="10" x="0" y="0" fill="#0f9536" stroke-width="5" stroke="#0f9536"/><rect width="430" height="250" rx="10" ry="10" x="10" y="40" fill="#11a63c" stroke-width="0"/><ellipse cx="20" cy="20" rx="10" ry="10" fill="#11a63c" stroke-width="0"/><ellipse cx="50" cy="20" rx="10" ry="10" fill="#11a63c" stroke-width="0"/><ellipse cx="80" cy="20" rx="10" ry="10" fill="#11a63c" stroke-width="0"/><text x="225" y="141.25" text-anchor="middle" fill="#ffffff" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">richclient, nscale</tspan></text></g><g transform="translate(525,670)"><path d="M390,0 L390,60 L450,30 L 390,0" style="fill:#707070" stroke-dasharray="" /><path d="M0,30 L390,30" style="stroke:#707070; stroke-width: 6; fill: none; stroke-dasharray: 30 30;" /><text x="225" y="76.25" text-anchor="middle" fill="#707070" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">Relationship</tspan></text></g></svg>

dsl/export/export-diagrams.js

@@ -0,0 +1,152 @@
+const puppeteer = require('puppeteer');
+const fs = require('fs');
+
+const FILENAME_SUFFIX = '';
+
+const PNG_FORMAT = 'png';
+const SVG_FORMAT = 'svg';
+
+const IGNORE_HTTPS_ERRORS = true;
+const HEADLESS = true;
+
+const IMAGE_VIEW_TYPE = 'Image';
+
+if (process.argv.length < 4) {
+  console.log("Usage: <structurizrUrl> <png|svg> [username] [password]")
+  process.exit(1);
+}
+
+const url = process.argv[2];
+const format = process.argv[3];
+
+if (format !== PNG_FORMAT && format !== SVG_FORMAT) {
+  console.log("The output format must be ' + PNG_FORMAT + ' or ' + SVG_FORMAT + '.");
+  process.exit(1);
+}
+
+var username;
+var password;
+
+if (process.argv.length > 3) {
+  username = process.argv[4];
+  password = process.argv[5];
+}
+
+var expectedNumberOfExports = 0;
+var actualNumberOfExports = 0;
+
+(async () => {
+  const browser = await puppeteer.launch({ignoreHTTPSErrors: IGNORE_HTTPS_ERRORS, headless: HEADLESS});
+  const page = await browser.newPage();
+
+  if (username !== undefined && password !== undefined) {
+    // sign in
+    const parts = url.split('://');
+    const signinUrl = parts[0] + '://' + parts[1].substring(0, parts[1].indexOf('/')) + '/dashboard'; 
+    console.log(' - Signing in via ' + signinUrl);
+
+    await page.goto(signinUrl, { waitUntil: 'networkidle2' });
+    await page.type('#username', username);
+    await page.type('#password', password);
+    await page.keyboard.press('Enter');
+    await page.waitForSelector('div#dashboard');
+  }
+
+  // visit the diagrams page
+  console.log(" - Opening " + url);
+  await page.goto(url, { waitUntil: 'domcontentloaded' });
+  await page.waitForFunction('structurizr.scripting && structurizr.scripting.isDiagramRendered() === true');
+
+  if (format === PNG_FORMAT) {
+    // add a function to the page to save the generated PNG images
+    await page.exposeFunction('savePNG', (content, filename) => {
+      console.log(" - " + filename);
+      content = content.replace(/^data:image\/png;base64,/, "");
+      fs.writeFile(filename, content, 'base64', function (err) {
+        if (err) throw err;
+      });
+      
+      actualNumberOfExports++;
+
+      if (actualNumberOfExports === expectedNumberOfExports) {
+        console.log(" - Finished");
+        browser.close();
+      }
+    });
+  }
+
+  // get the array of views
+  const views = await page.evaluate(() => {
+    return structurizr.scripting.getViews();
+  });
+
+  views.forEach(function(view) {
+    if (view.type === IMAGE_VIEW_TYPE) {
+      expectedNumberOfExports++; // diagram only
+    } else {
+      expectedNumberOfExports++; // diagram
+      expectedNumberOfExports++; // key
+    }
+  });
+
+  console.log(" - Starting export");
+  for (var i = 0; i < views.length; i++) {
+    const view = views[i];
+
+    await page.evaluate((view) => {
+      structurizr.scripting.changeView(view.key);
+    }, view);
+
+    await page.waitForFunction('structurizr.scripting.isDiagramRendered() === true');
+
+    if (format === SVG_FORMAT) {
+      const diagramFilename = FILENAME_SUFFIX + view.key + '.svg';
+      const diagramKeyFilename = FILENAME_SUFFIX + view.key + '-key.svg'
+
+      var svgForDiagram = await page.evaluate(() => {
+        return structurizr.scripting.exportCurrentDiagramToSVG({ includeMetadata: true });
+      });
+    
+      console.log(" - " + diagramFilename);
+      fs.writeFile(diagramFilename, svgForDiagram, function (err) {
+        if (err) throw err;
+      });
+      actualNumberOfExports++;
+    
+      if (view.type !== IMAGE_VIEW_TYPE) {
+        var svgForKey = await page.evaluate(() => {
+          return structurizr.scripting.exportCurrentDiagramKeyToSVG();
+        });
+      
+        console.log(" - " + diagramKeyFilename);
+        fs.writeFile(diagramKeyFilename, svgForKey, function (err) {
+          if (err) throw err;
+        });
+        actualNumberOfExports++;
+      }
+
+      if (actualNumberOfExports === expectedNumberOfExports) {
+        console.log(" - Finished");
+        browser.close();
+      }    
+    } else {
+      const diagramFilename = FILENAME_SUFFIX + view.key + '.png';
+      const diagramKeyFilename = FILENAME_SUFFIX + view.key + '-key.png'
+
+      page.evaluate((diagramFilename) => {
+        structurizr.scripting.exportCurrentDiagramToPNG({ includeMetadata: true, crop: false }, function(png) {
+          window.savePNG(png, diagramFilename);
+        })
+      }, diagramFilename);
+
+      if (view.type !== IMAGE_VIEW_TYPE) {
+        page.evaluate((diagramKeyFilename) => {
+          structurizr.scripting.exportCurrentDiagramKeyToPNG(function(png) {
+            window.savePNG(png, diagramKeyFilename);
+          })
+        }, diagramKeyFilename);
+      }
+    }
+  }
+
+})();

dsl/export/export-documentation.js

@@ -0,0 +1,63 @@
+const puppeteer = require('puppeteer');
+const fs = require('fs');
+
+const FILENAME_SUFFIX = '';
+
+const IGNORE_HTTPS_ERRORS = true;
+const HEADLESS = true;
+
+if (process.argv.length < 3) {
+  console.log("Usage: <structurizrUrl> [username] [password]")
+  process.exit(1);
+}
+
+const url = process.argv[2];
+
+var username;
+var password;
+
+if (process.argv.length > 2) {
+  username = process.argv[3];
+  password = process.argv[4];
+}
+
+(async () => {
+  const browser = await puppeteer.launch({ignoreHTTPSErrors: IGNORE_HTTPS_ERRORS, headless: HEADLESS});
+  const page = await browser.newPage();
+
+  if (username !== undefined && password !== undefined) {
+    // sign in
+    const parts = url.split('://');
+    const signinUrl = parts[0] + '://' + parts[1].substring(0, parts[1].indexOf('/')) + '/dashboard'; 
+    console.log(' - Signing in via ' + signinUrl);
+
+    await page.goto(signinUrl, { waitUntil: 'networkidle2' });
+    await page.type('#username', username);
+    await page.type('#password', password);
+    await page.keyboard.press('Enter');
+    await page.waitForSelector('div#dashboard');
+  }
+
+  // visit the documentation page
+  console.log(" - Opening " + url);
+  await page.goto(url, { waitUntil: 'domcontentloaded' });
+  await page.waitForFunction('structurizr.scripting && structurizr.scripting.isDocumentationRendered() === true');
+
+  await page.exposeFunction('saveHtml', (content) => {
+    const filename = FILENAME_SUFFIX + 'documentation.html';
+    console.log(" - Writing " + filename);
+    fs.writeFile(filename, content, 'utf8', function (err) {
+      if (err) throw err;
+    });
+
+    console.log(" - Finished");
+    browser.close();
+  });
+
+  await page.evaluate(() => {
+    return structurizr.scripting.exportDocumentationToOfflineHtmlPage(function(html) {
+      saveHtml(html);
+    });
+  });
+
+})();

dsl/export/sc_nappl-key.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 2500 1000" style="background: #ffffff"><g transform="translate(25,100)"><path id="keyDatabaseCylinderPath" d="M 0,22.5 a 225,22.5 0,0,0 450 0 a 225,22.5 0,0,0 -450 0 l 0,255 a 225,22.5 0,0,0 450 0 l 0,-255" fill="#707070" stroke-width="2" stroke="#656565"></path><text x="225" y="142.5" text-anchor="middle" fill="#ffffff" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">Database</tspan></text></g><g transform="translate(525,100)"><rect width="450" height="300" rx="3" ry="3" x="0" y="0" fill="#dddddd" stroke-width="2" stroke="#c7c7c7"/><text x="225" y="131.25" text-anchor="middle" fill="#000000" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">Element</tspan></text></g><g transform="translate(1025,100)"><rect width="450" height="300" rx="3" ry="3" x="0" y="0" fill="#dddddd" stroke-width="2" stroke="#3d6fdd"/><text x="225" y="96.25" text-anchor="middle" fill="#3d6fdd" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">Kubernetes - crd</tspan></text><image xlink:href="https://static.structurizr.com/themes/kubernetes-v0.3/crd-256.png" x="195" y="153.75" width="60" height="60" opacity="1"/></g><g transform="translate(1525,100)"><rect width="450" height="300" rx="3" ry="3" x="0" y="0" fill="#dddddd" stroke-width="2" stroke="#3d6fdd"/><text x="225" y="96.25" text-anchor="middle" fill="#3d6fdd" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">Kubernetes - ds</tspan></text><image xlink:href="https://static.structurizr.com/themes/kubernetes-v0.3/ds-256.png" x="195" y="153.75" width="60" height="60" opacity="1"/></g><g transform="translate(2025,55.5)"><polygon points="112.5,0 337.5,0 450,194.5 337.5,389 112.5,389 0,194.5" fill="#dddddd" stroke-width="2" stroke="#3d6fdd"/><text x="225" y="140.75" text-anchor="middle" fill="#3d6fdd" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">Kubernetes - svc</tspan></text><image xlink:href="https://static.structurizr.com/themes/kubernetes-v0.3/svc-256.png" x="195" y="198.25" width="60" height="60" opacity="1"/></g><g transform="translate(25,600)"><rect width="450" height="300" rx="3" ry="3" x="0" y="0" fill="#424c63" stroke-width="2" stroke="#3b4459"/><text x="225" y="131.25" text-anchor="middle" fill="#ffffff" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">nplus</tspan></text></g><g transform="translate(525,600)"><rect width="450" height="300" rx="3" ry="3" x="0" y="0" fill="#11a63c" stroke-width="2" stroke="#0f9536"/><text x="225" y="131.25" text-anchor="middle" fill="#ffffff" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">nscale</tspan></text></g><g transform="translate(1025,670)"><path d="M390,0 L390,60 L450,30 L 390,0" style="fill:#707070" stroke-dasharray="" /><path d="M0,30 L390,30" style="stroke:#707070; stroke-width: 6; fill: none; stroke-dasharray: 30 30;" /><text x="225" y="76.25" text-anchor="middle" fill="#707070" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">Relationship</tspan></text></g></svg>

dsl/export/sc_sap-key.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 2500 500" style="background: #ffffff"><g transform="translate(25,100)"><rect width="450" height="300" rx="3" ry="3" x="0" y="0" fill="#dddddd" stroke-width="2" stroke="#c7c7c7"/><text x="225" y="131.25" text-anchor="middle" fill="#000000" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">Element</tspan></text></g><g transform="translate(525,100)"><rect width="450" height="300" rx="3" ry="3" x="0" y="0" fill="#dddddd" stroke-width="2" stroke="#3d6fdd"/><text x="225" y="96.25" text-anchor="middle" fill="#3d6fdd" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">Kubernetes - ds</tspan></text><image xlink:href="https://static.structurizr.com/themes/kubernetes-v0.3/ds-256.png" x="195" y="153.75" width="60" height="60" opacity="1"/></g><g transform="translate(1025,100)"><rect width="450" height="300" rx="3" ry="3" x="0" y="0" fill="#11a63c" stroke-width="2" stroke="#0f9536"/><text x="225" y="131.25" text-anchor="middle" fill="#ffffff" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">nscale</tspan></text></g><g transform="translate(1525,170)"><path d="M390,0 L390,60 L450,30 L 390,0" style="fill:#707070" stroke-dasharray="" /><path d="M0,30 L390,30" style="stroke:#707070; stroke-width: 6; fill: none; stroke-dasharray: 30 30;" /><text x="225" y="76.25" text-anchor="middle" fill="#707070" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">Relationship</tspan></text></g></svg>

dsl/export/sc_web-key.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 2500 500" style="background: #ffffff"><g transform="translate(25,100)"><rect width="450" height="300" rx="3" ry="3" x="0" y="0" fill="#dddddd" stroke-width="2" stroke="#3d6fdd"/><text x="225" y="96.25" text-anchor="middle" fill="#3d6fdd" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">Kubernetes - crd</tspan></text><image xlink:href="https://static.structurizr.com/themes/kubernetes-v0.3/crd-256.png" x="195" y="153.75" width="60" height="60" opacity="1"/></g><g transform="translate(525,100)"><rect width="450" height="300" rx="3" ry="3" x="0" y="0" fill="#dddddd" stroke-width="2" stroke="#3d6fdd"/><text x="225" y="96.25" text-anchor="middle" fill="#3d6fdd" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">Kubernetes - ds</tspan></text><image xlink:href="https://static.structurizr.com/themes/kubernetes-v0.3/ds-256.png" x="195" y="153.75" width="60" height="60" opacity="1"/></g><g transform="translate(1025,100)"><rect width="450" height="300" rx="3" ry="3" x="0" y="0" fill="#424c63" stroke-width="2" stroke="#3b4459"/><text x="225" y="131.25" text-anchor="middle" fill="#ffffff" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">nplus</tspan></text></g><g transform="translate(1525,100)"><rect width="450" height="300" rx="3" ry="3" x="0" y="0" fill="#11a63c" stroke-width="2" stroke="#0f9536"/><text x="225" y="131.25" text-anchor="middle" fill="#ffffff" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">nscale</tspan></text></g><g transform="translate(2025,170)"><path d="M390,0 L390,60 L450,30 L 390,0" style="fill:#707070" stroke-dasharray="" /><path d="M0,30 L390,30" style="stroke:#707070; stroke-width: 6; fill: none; stroke-dasharray: 30 30;" /><text x="225" y="76.25" text-anchor="middle" fill="#707070" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">Relationship</tspan></text></g></svg>

dsl/export/sl_nappl-key.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 2500 500" style="background: #ffffff"><g transform="translate(25,100)"><rect width="450" height="300" rx="3" ry="3" x="0" y="0" fill="#dddddd" stroke-width="2" stroke="#c7c7c7"/><text x="225" y="131.25" text-anchor="middle" fill="#000000" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">Element</tspan></text></g><g transform="translate(525,100)"><rect width="450" height="300" rx="3" ry="3" x="0" y="0" fill="#11a63c" stroke-width="2" stroke="#0f9536"/><text x="225" y="131.25" text-anchor="middle" fill="#ffffff" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">nscale</tspan></text></g><g transform="translate(1025,170)"><path d="M390,0 L390,60 L450,30 L 390,0" style="fill:#707070" stroke-dasharray="" /><path d="M0,30 L390,30" style="stroke:#707070; stroke-width: 6; fill: none; stroke-dasharray: 30 30;" /><text x="225" y="76.25" text-anchor="middle" fill="#707070" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">Relationship</tspan></text></g></svg>

dsl/export/sl_user-key.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 2500 1000" style="background: #ffffff"><g transform="translate(25,100)"><rect width="450" height="300" rx="3" ry="3" x="0" y="0" fill="#dddddd" stroke-width="2" stroke="#c7c7c7"/><text x="225" y="131.25" text-anchor="middle" fill="#000000" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">Element</tspan></text></g><g transform="translate(525,100)"><rect width="450" height="300" rx="20" ry="20" x="0" y="0" fill="#0f9536" stroke-width="5" stroke="#0f9536"/><rect width="370" height="280" rx="5" ry="5" x="40" y="10" fill="#11a63c" stroke-width="0"/><ellipse cx="20" cy="150" rx="10" ry="10" fill="#11a63c" stroke-width="0"/><line x1="430" y1="125" x2="430" y2="175" stroke-width="5" stroke="#11a63c"/><text x="225" y="131.25" text-anchor="middle" fill="#ffffff" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">mobileclient, nscale</tspan></text></g><g transform="translate(1025,100)"><rect width="450" height="300" rx="3" ry="3" x="0" y="0" fill="#11a63c" stroke-width="2" stroke="#0f9536"/><text x="225" y="131.25" text-anchor="middle" fill="#ffffff" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">nscale</tspan></text></g><g transform="translate(1525,25)"><rect x="0" y="180" width="450" height="270" rx="90" fill="#dddddd" stroke-width="2" stroke="#c7c7c7"/><circle cx="225" cy="100" r="100" fill="#dddddd" stroke-width="2" stroke="#c7c7c7"/><line x1="90" y1="300" x2="90" y2="450" stroke-width="2" stroke="#c7c7c7"/><line x1="360" y1="300" x2="360" y2="450" stroke-width="2" stroke="#c7c7c7"/><text x="225" y="256.25" text-anchor="middle" fill="#000000" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">Person</tspan></text></g><g transform="translate(2025,100)"><rect width="450" height="300" rx="10" ry="10" x="0" y="0" fill="#0f9536" stroke-width="5" stroke="#0f9536"/><rect width="430" height="250" rx="10" ry="10" x="10" y="40" fill="#11a63c" stroke-width="0"/><rect width="340" height="20" rx="10" ry="10" x="100" y="10" fill="#11a63c" stroke-width="0"/><ellipse cx="20" cy="20" rx="10" ry="10" fill="#11a63c" stroke-width="0"/><ellipse cx="50" cy="20" rx="10" ry="10" fill="#11a63c" stroke-width="0"/><ellipse cx="80" cy="20" rx="10" ry="10" fill="#11a63c" stroke-width="0"/><text x="225" y="141.25" text-anchor="middle" fill="#ffffff" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">webclient, nscale</tspan></text></g><g transform="translate(25,670)"><path d="M390,0 L390,60 L450,30 L 390,0" style="fill:#707070" stroke-dasharray="" /><path d="M0,30 L390,30" style="stroke:#707070; stroke-width: 6; fill: none; stroke-dasharray: 30 30;" /><text x="225" y="76.25" text-anchor="middle" fill="#707070" font-size="30px" font-family="Open Sans"><tspan x="225" dy="40px">Relationship</tspan></text></g></svg>