Digit - Advanced Hierarchical Diagram Editor

Digit is a powerful, web-based diagram editor that revolutionizes the way you create and manage complex hierarchical diagrams. Built with modern web technologies, it offers an intuitive interface for creating interconnected node-based diagrams with unlimited nesting capabilities. Try It Out

Key Features

Hierarchical Diagram Creation

• Nested Diagrams: Create diagrams within diagrams with unlimited depth
• Hierarchical Navigation: Seamlessly navigate between parent and child diagrams using breadcrumbs
• Visual Hierarchy: Clear visual indicators for nested relationships

Advanced Connection System

• Connectors: Create edges between any two elements by holding Alt and clicking each element
• Live Edge Routing: Edges automatically update as you move elements
• Control Points: Drag connector control points to create bezier curves
• Arrow Markers: Configurable start/end arrows on connectors

Rich Element Library

• 43 Built-in Shapes: Rectangle, Circle, Diamond, Pill, Cylinder, Cloud, Diamond, Star, Shield, Gear, Pod, Queue, and many more
• SVG Image Support: Import and integrate custom SVG graphics directly into diagrams
• Bounding Boxes: Group related elements with customizable containers
• CRC Cards & Threat Tables: Specialized shapes for security and design modeling

Professional Visual Features

• Custom Colors: Full color pickers for fill and stroke
• Border Styles: Solid and dotted border options with adjustable width
• Font Controls: Family, size, bold, and italic styling
• Responsive Design: Adapts to different screen sizes
• High-Performance Rendering: Smooth animations and interactions

Powerful Editing Capabilities

• Multi-Selection: Hold Shift while clicking to select multiple elements
• Grouping: Ctrl+G to group, Ctrl+Shift+G to ungroup
• Copy & Paste: Ctrl+C / Ctrl+V to duplicate elements
• Undo/Redo: Full undo history with 50-step buffer
• Drag & Drop: Intuitive element positioning via Angular CDK
• Rotate: Rotate elements 90 degrees

Data Management

• JSON Export/Import: Save and load diagrams in standard JSON format
• SVG Export: Export the current diagram level as an SVG file
• Persistent State: Automatic saving of diagram state to localStorage
• Cross-Session Continuity: Resume work exactly where you left off

Todo Tracking

• Per-Diagram Todos: Add, complete, and delete tasks tied to each diagram
• Persistent Tasks: Todo items persist with the diagram state

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm package manager

Installation

1. Clone the repository

   git clone https://github.com/anandb/digit.git
   cd digit

2. Install dependencies

   npm install

3. Start the development server

   ng serve

4. Open your browser Navigate to http://localhost:4200/

The application will automatically reload when you make changes to the source code.

Production Build

npm run build

The build artifacts will be stored in the dist/digit/ directory.

User Guide

Creating Your First Diagram

1. Add Elements: Click the Add button in the toolbar to open the shape palette, then click a shape to add it
2. Position Elements: Drag elements around the canvas to arrange your diagram
3. Create Connections: Hold Alt and click on two elements to create a connector between them
4. Customize Appearance: Right-click any element to open the Properties window

Working with Connectors

• Creating Connectors: Hold Alt and click the first element, then Alt+click the second element
• Editing Connectors: Right-click a connector to open its properties
• Control Points: Drag connector control points to create curved bezier paths
• Arrows: Configure start and end arrow styles in the connector properties

Hierarchical Diagrams

Digit supports unlimited nesting levels:

1. Create Inner Diagram: Double-click on any node to enter its inner diagram
2. Navigate Hierarchy: Use the breadcrumb navigation or back button to return to parent diagrams
3. Nested Diagram Indicators: Nodes with inner diagrams show a blue folder badge

Properties Window

Right-click any element to open the Properties window, which provides:

• Name: Label for the element
• Content: Editable text for Note and Text shapes
• Border: Solid/dotted toggle and stroke width (0.5-4px)
• Colors: Fill and stroke color pickers
• Font: Family, size, bold, and italic controls
• Rounded Corners: For boxes and rectangles
• Locked: Prevent accidental moves (padlock shapes)
• Stereotypes: For rectangle elements
• Notes & Tags: Additional metadata
• CRC Card Editor: For CRC Card shapes
• Threat Table Editor: For Threat Table shapes

Keyboard Shortcuts

Shortcut	Action
Ctrl+Z	Undo last action
Ctrl+A	Select all elements
Ctrl+S	Save diagram as JSON
Ctrl+C	Copy selection
Ctrl+V	Paste clipboard
Ctrl+G	Group selected elements
Ctrl+Shift+G	Ungroup
Delete / Backspace	Delete selected elements
Alt+Click (two elements)	Create connector
Shift+Click	Multi-select elements
Escape	Close toolbar dropdowns

Toolbar Features

• New: Create a new blank diagram
• Save / Load: Export and import diagrams as JSON
• Export: Save the current diagram level as an SVG file
• Add: Open the 43-shape palette
• Add Box: Insert a bounding box container
• Add SVG: Upload a custom SVG image
• View SVG: Open an SVG file in read-only viewer mode
• Rotate: Rotate the selected element 90 degrees
• Delete: Remove selected elements
• Chaos Mode: Toggle to spawn 4-7 randomized copies of each added shape
• Help: Toggle the instructions panel

Architecture

Core Components

src/
├── app/
│   ├── components/
│   │   ├── diagram-canvas/          # Main SVG canvas component
│   │   ├── diagram-toolbar/         # Sidebar with tools and shape palette
│   │   ├── properties-window/       # Element property editor
│   │   └── todo-panel/              # Per-diagram task tracker
│   ├── models/
│   │   └── diagram.model.ts         # TypeScript interfaces and types
│   ├── services/
│   │   └── diagram.service.ts       # Centralized state management
│   └── app.component.ts             # Root component
├── public/                          # Static assets (favicon)
├── styles.sass                      # Global styles
└── angular.json                     # Angular configuration

Key Technologies

• Angular 19: Modern reactive framework with standalone components
• TypeScript: Type-safe development with strict mode
• RxJS: Reactive programming for state management
• SVG: Scalable vector graphics for crisp rendering
• Angular CDK: Component development kit for drag-and-drop
• SSR: Server-side rendering support via Angular SSR

State Management

Digit uses a centralized state management approach:

• DiagramService: Manages all diagram state and operations
• Reactive Updates: Real-time UI updates via RxJS observables
• Undo System: 50-step undo buffer per diagram
• Hierarchical State: Maintains state across nested diagrams
• localStorage Persistence: Full diagram state saved automatically

Development

Available Scripts

Command	Description
ng serve	Start the development server
npm run build	Production build to dist/digit/
npm run build:single	Build as a single self-contained HTML file
npm run serve:ssr:digit	Start the SSR server (requires prior build)

Code Scaffolding

Generate new components:

ng generate component component-name
ng generate service service-name
ng generate guard guard-name

Advanced Use Cases

System Architecture Diagrams

Create detailed system architectures with nested components, showing data flow and dependencies.

Flowchart Design

Build complex business process flows with conditional logic and decision points.

Network Topology

Map network infrastructure with hierarchical views of subnets, devices, and connections.

Data Flow Diagrams

Visualize data transformations and processing pipelines across multiple levels.

Organizational Charts

Design organizational structures with reporting relationships and team hierarchies.

Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

Development Guidelines

• Follow Angular style guide
• Write comprehensive tests
• Update documentation
• Maintain TypeScript strict mode
• Use semantic commit messages

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Angular team for the excellent framework
• Open source community for inspiration and tools
• Contributors who help improve Digit

Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Documentation: Wiki

---

Made with Angular and TypeScript

Digit - Where ideas connect visually