Prettybt
simple binary tree visualizer
Install / Use
/learn @ggorlen/PrettybtREADME
prettybt
Simple binary tree visualizer
Usage
Browser
<body>
<!-- always use a specific commit hash -->
<script src="https://cdn.jsdelivr.net/gh/ggorlen/prettybt@f55c8c5/js/pbt.min.js"></script>
<script>
var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
var tree = {val: 1, left: {val: 2}, right: {val: 3}};
// or: var tree = PrettyBT.treeFromString("[a,b,c,,d]");
PrettyBT.drawBinaryTree(canvas, tree, {size: 17});
</script>
</body>
Making an SVG with canvas2svg
<body>
<script src="https://cdn.jsdelivr.net/gh/gliffy/canvas2svg@eaab317/canvas2svg.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/ggorlen/prettybt@f55c8c5/js/pbt.min.js"></script>
<script>
var tree = PrettyBT.randomTree();
var dimensions = PrettyBT.computeDimensions(tree);
var canvas = (function () {
var ctx = new C2S(dimensions.width, dimensions.height);
return {
getContext: function () {
return ctx;
}
};
})();
PrettyBT.drawBinaryTree(canvas, tree);
var svg = document.createElement("div");
document.body.appendChild(svg);
svg.outerHTML = canvas.getContext().getSerializedSvg();
</script>
</body>
NodeJS with canvas
const {createCanvas} = require("canvas"); // tested with 2.11.2
const PrettyBT = require("prettybt");
const canvas = createCanvas();
const tree = PrettyBT.randomTree();
PrettyBT.drawBinaryTree(canvas, tree);
console.log(`<img src="${canvas.toDataURL()}" />`);
Related Skills
node-connect
337.1kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
83.1kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
337.1kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
commit-push-pr
83.1kCommit, push, and open a PR
