# SparkChart

> Free online UML diagram and flow chart tool with PlantUML syntax support

## Description

SparkChart is a professional, client-side UML diagram and flowchart creation tool that uses PlantUML syntax. All diagram rendering happens in your browser for complete privacy and security - no data is sent to external servers.

## Key Features

- **Sequence Diagrams**: Create interaction diagrams showing object communications
- **Class Diagrams**: Visualize object-oriented system structure with classes and relationships
- **Activity Diagrams**: Model workflows and business processes
- **Use Case Diagrams**: Document system requirements and user interactions
- **Flow Charts**: Design process flows and decision trees
- **Client-Side Rendering**: Complete privacy - all processing happens locally
- **PlantUML Syntax**: Industry-standard diagram-as-code format
- **Export Options**: PNG, SVG, PDF formats supported
- **Theme Customization**: Multiple color schemes and styling options
- **No Login Required**: Free to use without registration for basic features

## Technology Stack

- **Frontend**: Next.js 14, React, TypeScript
- **Styling**: Tailwind CSS
- **Rendering**: Custom PlantUML parser and SVG renderer
- **State Management**: React hooks and context

## Documentation

Comprehensive documentation is available for all diagram types:

### Sequence Diagrams
- Overview: https://sparkchart.pro/docs/sequence-diagram
- Activations: https://sparkchart.pro/docs/sequence-diagram/activations
- Participants: https://sparkchart.pro/docs/sequence-diagram/participants
- Messages: https://sparkchart.pro/docs/sequence-diagram/messages
- Notes & Fragments: https://sparkchart.pro/docs/sequence-diagram/notes-fragments
- Styling: https://sparkchart.pro/docs/sequence-diagram/styling

### Flow Charts
- Overview: https://sparkchart.pro/docs/flow-chart
- Syntax & Nodes: https://sparkchart.pro/docs/flow-chart/syntax
- Control Flow: https://sparkchart.pro/docs/flow-chart/control-flow
- Partitioning: https://sparkchart.pro/docs/flow-chart/partitioning
- Styling: https://sparkchart.pro/docs/flow-chart/styling

### Class Diagrams
- Overview: https://sparkchart.pro/docs/class-diagram
- Classes & Interfaces: https://sparkchart.pro/docs/class-diagram/classes-interfaces
- Relationships: https://sparkchart.pro/docs/class-diagram/relationships
- Packages: https://sparkchart.pro/docs/class-diagram/packages
- Styling & Notes: https://sparkchart.pro/docs/class-diagram/styling

### Activity Diagrams
- Overview: https://sparkchart.pro/docs/activity-diagram
- Actions & Flow: https://sparkchart.pro/docs/activity-diagram/actions
- Flow Control: https://sparkchart.pro/docs/activity-diagram/flow-control
- Styling & Notes: https://sparkchart.pro/docs/activity-diagram/styling

### Use Case Diagrams
- Overview: https://sparkchart.pro/docs/use-case-diagram
- Actors & Use Cases: https://sparkchart.pro/docs/use-case-diagram/actors
- Relationships: https://sparkchart.pro/docs/use-case-diagram/relationships
- System Boundaries: https://sparkchart.pro/docs/use-case-diagram/system-boundaries
- Styling: https://sparkchart.pro/docs/use-case-diagram/styling

## Use Cases

- Software architecture documentation
- System design and modeling
- Business process visualization
- Requirements gathering and analysis
- Technical documentation
- Educational purposes
- Team collaboration on design

## Target Audience

- Software developers and architects
- Business analysts
- System designers
- Technical writers
- Students and educators
- Product managers
- DevOps engineers

## Alternatives

SparkChart serves as a free alternative to:
- PlantUML Web Server
- Mermaid Live Editor
- Draw.io (for UML diagrams)
- Lucidchart
- Microsoft Visio

## Privacy & Security

All diagram processing occurs client-side in the browser. No diagram data is transmitted to external servers, ensuring complete privacy and security for sensitive technical documentation.