Intro

@c4mjs/c4-react is a library for creating C4 diagrams in React.

It uses React Flow for rendering the diagrams, giving interactive canvases that can be used in any React application.

The interactive zooming and panning features of React Flow make it easy to create and view large diagrams.

Example Uses

• Embedded diagrams in technical documentation
• Building a custom System Catalogue
• Creating a single source of truth for your architecture diagrams and decision records

Features

• Reusable Component Definitions in Javascript/Typescript 🛠️
• Manage Workspaces using Javascript ecosystem tools like NPM 📦
• Embed C4 diagrams in your React applications 🚀
• Downloadable 📥 diagrams using html-to-image & downloadjs
• Supports Light 🌞 and Dark 🌚 themes out of the box

Example

You can see a live example of a system context diagram below, unlock the canvas to move nodes around.

Personal banking customer[Software System]A customer of the bank, with personal bank accounts.

Internet Banking System[Software System]Allows customers to view information about their bank accounts, and make payments.

Mainframe[Software System]Stores all of the core banking information about customers, accounts, transactions, etc.

Email System[Software System]The internal Microsoft Exchange e-mail system.

React Flow

Press enter or space to select a node.You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.

Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.