Box-n-Weave.js Logo

Box-n-Weave.js

Create stunning graph diagrams that pack a visual punch

Get Started
Read 'em like a book
Easy-to-learn, intuitive syntax that makes creating graphs feel natural and effortless.
Stick and Move
Bring your graphs to life with fluid animations that make your data dance.
Clinch Up
"Pull in" custom images to create unique designs that make your graphs stand out.
Punch above your weight
It's a lightweight contender with 0 dependencies, keeping your project lean and mean.
Win by Split Decision
Separation of Concerns via document sections for better readability and composability.
Counter the Cross
Navigate through minimal edge crossings for crystal-clear clarity.
Square Off
Try square edges for easily distinguishable connections.
Be an Out-boxer
Add hyperlinks to external documents and graphs.
Throwin' Combos
Combine different styles in the same graph with node-grouped option configuration.
Sportin' the Colors
VS Code extension available with code highlighting and previewing for .boxn and .boxn.txt files.

Example Diagrams

Explore what you can create with Box-n-Weave.js

Super Simple Example

Super Simple Example

Create your first graph in seconds. Perfect starting point for beginners.

Beginner
State Machine Example

State Machine

See how states transition with smooth animations. Compare with static version.

Technical, Animated
Supply Chain Flow Example

Supply Chain Flow

Visualize logistics and supply chain processes with animated flows.

Business, Animated
Timeline Navigation Example

Timeline Navigation

Step through events with keyboard/mouse. Perfect for historical data.

Interactive
System Architecture Example

System Architecture

Technical infrastructure and component relationships.

Technical
Network Topology Example

Network Topology

Visualize network connections and infrastructure.

Technical
Root Cause Analysis Example

Root Cause Analysis

Break down problems to find root causes.

Analysis
Organization Chart Example

Organization Chart

Hierarchical structure and reporting relationships.

Business
Flow Chart Example

Flow Chart

Step-by-step process visualization.

Business
Character Map Example

Character Map

Map relationships between characters or entities.

Analysis
Concept Map Example

Concept Map

Connect and organize ideas and concepts.

Analysis
ERD Example

ERD

Database schema and relationship visualization.

Technical
Recipe Example

Recipe

Step-by-step recipe visualization.

Fun
Research Notes Example

Research Notes

Organize research notes and references.

Analysis
Navigable Taxonomy

Navigable Taxonomy

A navigable set of graphs that share the same styling definition.

Technical