# Chhart - Complete Documentation > A free, web-based diagram editor that transforms simple text into beautiful flowcharts and Sankey diagrams using a simple indentation-based DSL. This is the complete reference documentation for Chhart's text-based syntax. Use this to understand how to create diagrams programmatically or via the web editor. ## Contract (Important) Chhart’s core idea: **diagram content is encoded in the URL**, so diagrams can be shared instantly without accounts. - **Supported diagram types**: Flowcharts and Sankey diagrams. - **Canonical share URL format (hash parameters)**: - Flowchart: `https://chhart.app/#flowchart=&title=` - Sankey: `https://chhart.app/#sankey=<base64url>&title=<title>` - **Embed mode (optional hash parameters)**: - `embed=1` enables embed mode - `theme=light|dark` sets embed theme - `toolbar=1` shows an embed toolbar - **Privacy**: The diagram text is in the URL. Treat shared links as public. - **Practical limits**: Very large diagrams can create very long URLs that some apps may truncate. ## URL Parameters (Advanced) Chhart parses hash parameters like a query string (everything after `#` is `key=value&key2=value2`). - **Common** - `title`: optional diagram title (URL-encoded) - `layout`: optional layout payload (base64url-encoded) - `engine`: optional layout engine identifier - `direction`: optional layout direction identifier - **Embed** - `embed=1` - `theme=light|dark` - `toolbar=1` - **Sankey config (optional)** - `sw`, `sh`: width/height - `snw`: node width - `snp`: node padding - `sno`: node opacity (float) - `slo`: link opacity (float) - `sa`: smart alignment (`1|0` or `true|false`) ## Who Should Use Chhart Chhart is designed for anyone who needs to create diagrams quickly without learning complex software: | Audience | Why Chhart? | |----------|-------------| | **Beginners** | No design skills needed - write like an outline, get a flowchart | | **Students** | Free for assignments, projects, presentations, and study materials | | **Professionals** | Quick process documentation without enterprise software complexity | | **Business Teams** | Collaborate via URL sharing, no accounts or installations required | | **Project Managers** | Visualize workflows, decision processes, and project phases | | **Data Analysts** | Create Sankey diagrams for budget visualization and data flow analysis | | **Technical Writers** | Document system architectures and API workflows with ease | ## Industry Use Cases ### Business & Operations - Process flow documentation for SOPs - Organizational workflows and approval chains - Customer journey mapping ### Data & Analytics - Budget allocation visualization (Sankey) ### Business Analytics & Research - User behavior funnels (Sankey) - Customer churn analysis - Sales pipeline visualization - Survey response flows ### Energy & Resource Management - Energy flow analysis (Sankey) - Resource distribution tracking - Supply chain mapping ### Software Development & Engineering - User authentication flows - System architecture diagrams (UML Lite) - Class hierarchies and object relationships - Network topology diagrams - API request/response flows - CI/CD pipeline visualization - Server load balancing (Sankey) - Traffic flow analysis ### Mind Mapping & Brainstorming - Hierarchical idea organization - Meeting notes visualization - Project breakdown structures ### Education - Teaching flowchart concepts - Visualizing algorithms and logic - Student assignments and projects --- ## Flowchart Syntax Chhart flowcharts use an indentation-based syntax that resembles an outline: ### Basic Structure - Each line represents a node in the flowchart - Indentation (2 spaces) creates connections (parent → child) - Attributes in square brackets customize appearance ### Simple Example ``` Start Process Step 1 Decision? [shape=diamond] Yes Action A End No Action B End ``` ### Node Attributes Add attributes in square brackets after node text: | Attribute | Syntax | Description | |-----------|--------|-------------| | Shape | `[shape=diamond]` | Node shape: diamond, circle, rectangle | | Text Color | `[color=blue]` | Text color (name or hex) | | Background | `[bg=green]` | Background color | | Border | `[border=2px solid red]` | Border style | ### Styling Examples ``` Blue Text [color=blue] Green Background [bg=green] Diamond Shape [shape=diamond] Custom Border [border=2px dashed red] Important Step [bg=#FF5733] [color=white] ``` ### Containers Use curly braces to group related items visually: ``` Process Group { Step 1 Step 2 Step 3 } Next Step ``` ### Flowchart Tips - Write like an outline—indentation shows hierarchy - Use descriptive node names for clarity - Add shape=diamond for decision points - Use colors to highlight important nodes --- ## Sankey Diagram Syntax Sankey diagrams show weighted flows between nodes. ### Basic Format ``` Source Node [value=number] Target Node ``` The `[value=N]` attribute specifies the flow magnitude from parent to child. ### Simple Example ``` Revenue [value=60] Profit [value=40] Costs Costs [value=25] Salaries [value=15] Operations ``` ### Multi-level Flows Flows can split and merge across multiple levels: ``` Energy Production [value=400] Residential [value=350] Commercial [value=250] Industrial Residential [value=300] Heating [value=100] Lighting Commercial [value=200] HVAC [value=150] Equipment ``` ### Sankey Tips - Values represent flow magnitude/weight - Nodes are created automatically from names - Total input should equal total output for balanced diagrams - Use consistent naming for nodes that appear multiple times --- ## Complete Examples ### User Authentication Flow (Flowchart) ``` User Visits Site Has Account? [shape=diamond] Yes Enter Credentials Validate [shape=diamond] Success Dashboard [bg=green] Failure Show Error [bg=red] Enter Credentials No Sign Up Form Submit Registration Send Verification Email User Verifies Dashboard [bg=green] ``` ### Software Development Lifecycle (Flowchart) ``` Requirements Design Implementation Code Review [shape=diamond] Approved Testing Tests Pass? [shape=diamond] Yes Deployment [bg=green] No Bug Fixes [bg=orange] Testing Needs Changes Implementation ``` ### Company Budget Allocation (Sankey) ``` Total Revenue [value=40] Operating Costs [value=25] Marketing [value=20] R&D [value=15] Profit Operating Costs [value=25] Salaries [value=10] Infrastructure [value=5] Utilities Marketing [value=15] Digital Ads [value=10] Events ``` ### Energy Flow Analysis (Sankey) ``` Solar [value=500] Grid Wind [value=300] Grid Natural Gas [value=200] Grid Grid [value=400] Residential [value=350] Commercial [value=250] Industrial Residential [value=250] Heating [value=150] Appliances ``` ### Business Analytics: User Churn (Sankey) ``` New Signups [value=30] Active Users [value=70] Churned Active Users [value=20] Pro Plan [value=10] Free Plan ``` ### Mind Map Example (Brainstorming) ``` Product Launch Idea Marketing Social Media Campaign Email Newsletter Influencer Outreach Development Feature Freeze QA Testing Bug Fixes Operations Server Scaling Support Training ``` ### Network/UML Diagram Example ``` Load Balancer [shape=diamond] Web Server 1 Database Primary [bg=blue] [color=white] Web Server 2 Database Replica [bg=gray] Cache Layer ``` --- ## MCP Server Integration Chhart provides a Model Context Protocol (MCP) server that enables AI assistants to create diagrams programmatically. ### Server Configuration ```json { "mcpServers": { "chhart": { "url": "https://mcp.chhart.app/mcp" } } } ``` ### Available Tools #### create_flowchart Creates a flowchart from DSL content. **Parameters:** - `content` (required): Flowchart DSL content - `title` (optional): Title for the flowchart **Returns:** A shareable URL to view and edit the flowchart **Example:** ``` create_flowchart({ content: "Start\n Process\n End", title: "Simple Flow" }) ``` #### create_sankey Creates a Sankey diagram from DSL content. **Parameters:** - `content` (required): Sankey DSL content - `title` (optional): Title for the diagram **Returns:** A shareable URL to view and edit the Sankey diagram **Example:** ``` create_sankey({ content: "Revenue\n [value=60] Profit\n [value=40] Costs", title: "Budget Overview" }) ``` #### get_syntax_help Retrieves DSL syntax documentation. **Parameters:** - `type` (optional): "flowchart", "sankey", or "all" (default: "all") **Returns:** Markdown documentation for the requested syntax --- ## Embed Diagrams Chhart allows you to embed interactive diagrams directly into your website, documentation, or blog using an iframe. ### How to Embed 1. Click the **Embed** button in the top toolbar 2. Customize the embed options in the preview panel: - **Size**: Choose from Small, Medium, Large, Full, or set Custom dimensions - **Theme**: Select Light or Dark mode (independent of your current view) - **Border**: Toggle the border around the embed - **Toolbar**: Show or hide the bottom toolbar in the embedded view 3. Copy the generated iframe code or the direct embed URL ### Embed Features - **Interactive**: Users can pan and zoom the embedded diagram - **Responsive**: Diagrams adjust to the container size - **Always Up-to-Date**: The embed code contains all the diagram data, so no external hosting or account is needed. --- ## URL Sharing Format Chhart diagrams are encoded in the URL, enabling instant sharing without accounts: - Flowcharts: `https://chhart.app/#flowchart=<base64url>&title=<title>` - Sankey: `https://chhart.app/#sankey=<base64url>&title=<title>` The content is base64url-encoded (URL-safe base64), allowing diagrams to be shared via URL alone. --- ## Support - **Website**: https://chhart.app - **Blog & Changelog**: https://hub.chhart.app - **MCP Server**: https://mcp.chhart.app/mcp