Skip to content
Permalink
Browse files

[fix] diagram generation script

  • Loading branch information...
Swaagie committed May 7, 2019
1 parent ef22a45 commit 479192a3b2ec818543f87ff050f4b4eebb4b1490
Showing with 419 additions and 24 deletions.
  1. +1 −1 assets/diagrams/test.mmd
  2. BIN assets/test.png
  3. +32 −13 bin/diagrams
  4. +0 −10 bin/index.html
  5. +385 −0 package-lock.json
  6. +1 −0 package.json
@@ -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>)
BIN +5.27 KB (120%) assets/test.png
Binary file not shown.
@@ -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
});

This file was deleted.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit 479192a

Please sign in to comment.
You can’t perform that action at this time.