I was frustrated with the complexity and size of existing diagram libraries, so I wrote a new one from scratch. Box-N-Weave.js generates box-and-arrow diagrams from text definitions, with a focus on maintainable technical documentation.<p>Key features:<p><pre><code> - Zero dependencies, tiny footprint (16.2kb gzipped vs 745kb for Mermaid.js)
- Clean separation of diagram content, styling, and animations
- Git-friendly text format that can live alongside your code
- Streamlined syntax for common technical diagrams (architecture, flows, state machines, etc.)
- Built-in animation support
</code></pre>
The layout algorithm was written from scratch (not using dagre/elkjs/cytoscape) to keep it lightweight while flexible enough to add novel features.<p>Examples: <a href="https://box-n-weave-026ffb.gitlab.io/#examples" rel="nofollow">https://box-n-weave-026ffb.gitlab.io/#examples</a><p>Repo: <a href="https://gitlab.com/andrewfulrich/box-n-weave" rel="nofollow">https://gitlab.com/andrewfulrich/box-n-weave</a><p>I'd love feedback on bugs, the API design, and use cases you'd want to see supported. The goal is to keep it focused on doing one thing well - making it dead simple to maintain box-and-arrow diagrams as code evolves.