xsukax Flowchart Maker

# xsukax Flowchart Maker

A professional, privacy-focused, client-side flowchart creation tool that enables users to design, customize, and export high-quality flowcharts without writing a single line of code.

**Github Repo:** [https://github.com/xsukax/xsukax-Flowchart-Maker](https://github.com/xsukax/xsukax-Flowchart-Maker)

**Demo:** [https://xsukax.github.io/xsukax-Flowchart-Maker](https://xsukax.github.io/xsukax-Flowchart-Maker)


## 🎯 Project Overview

**xsukax Flowchart Maker** is a sophisticated, single-page web application designed to democratize flowchart creation by providing an intuitive visual interface for building professional diagrams. Built entirely with modern web technologies, this tool leverages Mermaid.js for rendering, Bootstrap 5 for responsive design, and operates completely client-side—ensuring maximum privacy and zero server dependencies.

The application caters to developers, project managers, educators, business analysts, and anyone requiring clear visual representations of processes, workflows, or system architectures. By eliminating the need for coding knowledge or complex software installations, xsukax Flowchart Maker empowers users to focus on content rather than syntax.

### Key Capabilities

– **Visual Flowchart Builder**: Create complex flowcharts using an intuitive point-and-click interface
– **Smart Node Import**: Import nodes from existing Mermaid code and create connections visually
– **Real-Time Preview**: See changes instantly as you edit nodes and connections
– **Multiple Export Formats**: Download flowcharts as high-resolution PNG, scalable SVG, or Mermaid markdown
– **Comprehensive Node Shapes**: Support for 11 different node shapes including rectangles, diamonds, circles, and more
– **Custom Styling**: Full control over node colors, text colors, and connection types
– **Zero Installation**: Runs directly in any modern web browser
– **Privacy-First Design**: All processing happens locally in your browser

## 🔒 Security and Privacy Benefits

xsukax Flowchart Maker is architected with a privacy-first philosophy, ensuring that user data remains exclusively under user control:

### 1. **Complete Client-Side Operation**
All flowchart creation, editing, and rendering operations execute entirely within the user’s browser. No data is transmitted to external servers, eliminating risks associated with data interception, unauthorized access, or third-party data collection.

### 2. **No Data Persistence Mechanisms**
The application deliberately avoids using browser storage APIs (localStorage, sessionStorage, or IndexedDB). This design decision ensures that:
– No flowchart data persists after closing the browser tab
– No residual data remains on the device
– Users maintain complete control over their work products
– Compliance with strict data privacy regulations is inherent

### 3. **Zero External Dependencies for Runtime**
While the application loads libraries from trusted CDNs (Bootstrap, Mermaid.js, Bootstrap Icons), all user data processing occurs locally. CDN resources are used solely for rendering the interface and generating visualizations—they never access or transmit user-created content.

### 4. **No Authentication or Tracking**
The application requires no user accounts, login credentials, or personal information. No analytics, telemetry, or tracking mechanisms are embedded in the codebase, ensuring anonymous usage.

### 5. **Transparent Source Code**
As an open-source project licensed under GPL-3.0, the entire application codebase is publicly auditable. Users and security researchers can verify the absence of data collection mechanisms or security vulnerabilities.

### 6. **Export Control**
All export operations (PNG, SVG, Markdown) are handled via local browser APIs using client-side blob generation and download mechanisms. Exported files are created entirely on the user’s device without any cloud intermediation.

## ✨ Features and Advantages

### Core Features

#### 🎨 **Intuitive Visual Interface**
– GitHub-inspired clean design with professional aesthetics
– Split-panel layout: configuration on the left, live preview on the right
– Responsive design that adapts to desktop, tablet, and mobile devices
– Toast notifications for user feedback (no disruptive alert popups)

#### 📊 **Comprehensive Node Support**
Support for 11 Mermaid-compatible node shapes:
– **Rectangle**: Standard process boxes
– **Rounded Rectangle**: Soft-edged processes
– **Stadium**: Pill-shaped start/end nodes
– **Subroutine**: Process with side indicators
– **Cylindrical**: Database representations
– **Circle**: Simple circular nodes
– **Asymmetric**: Flag-shaped indicators
– **Rhombus**: Decision diamonds
– **Hexagon**: Preparation steps
– **Parallelogram**: Input/output operations
– **Trapezoid**: Manual operations

#### 🔗 **Flexible Connection Types**
Five distinct connection styles:
– **Solid Arrow** (→): Standard directional flow
– **Dotted Arrow** (⋯→): Alternate or conditional paths
– **Thick Arrow** (⇒): Emphasized connections
– **Open Link** (—): Non-directional associations
– **Dotted Open Link** (⋯): Weak associations

#### 📥 **Smart Node Import**
– Import nodes from existing Mermaid flowchart code
– Supports both `graph` and `flowchart` syntax
– Extracts node shapes, labels, and colors automatically
– Handles bare node IDs (e.g., `A`, `B`, `C`) and shaped nodes (e.g., `A[Label]`, `B{Decision}`)
– Creates connections manually via intuitive UI for maximum control

#### 🎨 **Advanced Customization**
– HTML5 color pickers for node background colors
– Independent text color selection for optimal contrast
– Optional connection labels for annotated workflows
– Configurable flowchart direction (TB, BT, LR, RL)

#### 💾 **Multi-Format Export**
– **PNG Export**: High-resolution (3× scale) raster images with transparent backgrounds
– **SVG Export**: Infinitely scalable vector graphics preserving all visual fidelity
– **Markdown Export**: Complete Mermaid code with styling directives for documentation integration

#### ⚡ **Performance Optimizations**
– Debounced rendering (300ms delay) prevents excessive re-renders during rapid editing
– Efficient DOM manipulation for color application
– Lazy rendering updates only when necessary

### Competitive Advantages

| Feature | xsukax Flowchart Maker | Traditional Tools |
|———|————————|——————-|
| **Installation Required** | ❌ No | ✅ Yes |
| **Internet Connection** | CDN only (optional offline with CDN cache) | Often required |
| **Data Privacy** | 🔒 100% local | ⚠️ Cloud-stored |
| **Learning Curve** | 📈 Minimal (visual interface) | 📚 Steep (syntax/UI complexity) |
| **Import Existing Code** | ✅ Yes (nodes) | ⚠️ Limited |
| **Export Formats** | PNG, SVG, Markdown | Varies |
| **Cost** | 💯 Free & Open Source | Often paid |
| **Cross-Platform** | ✅ Any browser | Platform-dependent |
| **Version Control Friendly** | ✅ (Markdown export) | ⚠️ Binary formats |

## 📦 Installation Instructions

### Standard Installation

xsukax Flowchart Maker requires no traditional installation. Follow these steps to get started:

#### Method 1: Direct Browser Access (Recommended)

1. **Download the Application**
“`bash
# Clone the repository
git clone https://github.com/xsukax/xsukax-Flowchart-Maker.git

# Navigate to the directory
cd xsukax-Flowchart-Maker
“`

2. **Open in Browser**
– Simply double-click `index.html`, or
– Right-click `index.html` → “Open with” → Select your preferred browser

3. **Start Creating**
– The application loads with a sample flowchart demonstrating capabilities
– Begin editing immediately or start from scratch

#### Method 2: Local Web Server (Optional)

For developers preferring a local server environment:

“`bash
# Using Python 3
python -m http.server 8000

# Using Node.js http-server
npx http-server -p 8000

# Using PHP
php -S localhost:8000
“`

Then navigate to `http://localhost:8000/index.html`

#### Method 3: GitHub Pages Deployment

Host your own instance:

1. Fork the repository on GitHub
2. Enable GitHub Pages in repository settings
3. Access via `https://yourusername.github.io/xsukax-Flowchart-Maker/`

### System Requirements

– **Operating System**: Windows, macOS, Linux, iOS, Android, or any OS supporting modern web browsers
– **Web Browser**: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+, or equivalent
– **Internet Connection**: Required for initial CDN resource loading (Bootstrap, Mermaid.js, Bootstrap Icons)
– **Storage**: < 1 MB for the HTML file - **Memory**: Minimal (standard browser requirements) ### Offline Usage Considerations While the application works primarily client-side, it loads three CDN resources: - Bootstrap 5.3.2 CSS & JS - Mermaid.js 11.12.0 - Bootstrap Icons 1.11.1 For complete offline functionality: 1. Download CDN resources locally 2. Modify `` and `