[fix] diagram generation script

godaddy · May 7, 2019 · 479192a · 479192a
1 parent ef22a45
commit 479192a
Show file tree

Hide file tree

Showing 6 changed files with 419 additions and 24 deletions.
diff --git a/assets/diagrams/test.mmd b/assets/diagrams/test.mmd
@@ -1,4 +1,4 @@
-graph TD
+graph LR
 C -->|enqueue build|D{NSQ}
 E(<br>carpenterd-worker<br><br>) --> |subscribe| D
 B --> C(<br>carpenterd<br><br>)

diff --git a/assets/test.png b/assets/test.png
diff --git a/bin/diagrams b/bin/diagrams
@@ -1,34 +1,52 @@
 #!/usr/bin/env node
 
-const { promisify } = require('util');
 const canihaz = require('canihaz');
 const path = require('path');
-const fs = require('fs');
+const fs = require('fs').promises;
 
-const readFile = promisify(fs.readFile);
-const readdir = promisify(fs.readdir);
 const source = path.join(__dirname, '..', 'assets', 'diagrams');
+const template = `
+<!doctype html>
+<html>
+  <head>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css">
+    <style>
+      html, * {
+        font-family: 'monaco';
+      }
+
+      .edgeLabel:not(:empty) {
+        padding: 0px 8px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container" class="mermaid"></div>
+    <script id="api" src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js" charset="utf-8"></script>
+  </body>
+</html>
+`;
 
 async function snapshot(page, file) {
-  const chart = await readFile(path.join(source, file), 'utf-8');
+  const chart = await fs.readFile(path.join(source, file), 'utf-8');
   const output = path.join(source, '..', `${ path.basename(file, '.mmd') }.png`);
 
   await page.evaluate(chart => {
-    window.mermaid.mermaidAPI.initialize({ theme: 'neutral' });
+    window.mermaid.mermaidAPI.initialize({ theme: 'forest' });
     window.mermaid.mermaidAPI.render('id1', chart, svg => {
       document.getElementById('container').innerHTML = svg;
     });
   }, chart);
 
   const clip = await page.$eval('#container svg', svg => {
-    const react = svg.getBoundingClientRect();
-    return { x: react.left, y: react.top, width: react.width, height: react.height };
+    const box = svg.getBoundingClientRect();
+    return { x: box.left, y: box.top, width: box.width, height: box.height };
   });
 
   await page.screenshot({ path: output, clip, omitBackground: true });
 }
 
-console.log('Requesting availability of puppeteer, it will be installed if unavailable.'); // eslint-ignore-line
+console.log('Requesting availability of puppeteer, it will be installed if unavailable.'); // eslint-disable-line
 
 canihaz({
   key: 'cliDependencies'
@@ -37,15 +55,16 @@ canihaz({
 
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
-  const diagrams = await readdir(source);
+  const diagrams = await fs.readdir(source);
 
-  page.setViewport({ width: 1920, height: 1080 });
-  await page.goto(`file://${ path.join(__dirname, 'index.html') }`);
+  await page.setViewport({ width: 1920, height: 1080 });
+  await page.setContent(template);
 
   for (const file of diagrams) {
     await snapshot(page, file);
   }
 
   await browser.close();
-  console.log('Chart images generated.'); // eslint-ignore-line
+
+  console.log('Chart images generated.'); // eslint-disable-line
 });
diff --git a/bin/index.html b/bin/index.html