An advanced visual node editor natively built for generating high-quality, print-ready SVG diagrams and architectures via AI (ChatGPT, Claude, DeepSeek).
CHARTICI is a specialized, React-based visual node engine explicitly built for generating professional illustrations with smart AI assistance.
Unlike generic flowchart tools (like draw.io or Miro) which rely on HTML overlays or complex canvas abstractions, this application generates pure SVG out-of-the-box. This guarantees that all layouts, text wrappings, and lines are cleanly imported into professional software like Adobe Illustrator, inDesign, or PDF processors.
- AI-Assisted Generation: Feed plain text requirements to an LLM, and instantly render complex architectures using Chartici logic.
- Topologies Supported: Flowcharts, Organizational Trees, Sequence Diagrams, ERD (Entity-Relationship), Matrices, Radial/Mind Maps, Pie Charts, and Timelines.
- Pure SVG Export: Production-ready vector graphics ready for print or web.
- A Orthogonal Routing*: Advanced heuristic routing engine avoiding nodes and elegantly bridging line crossings.
- Node.js (v18+)
- npm or yarn
- Clone the repository.
- Run
npm installto install dependencies. - Run
npm run devto start the local Vite development server.
This project was intentionally built from scratch without massive flowcharting libraries (e.g., React Flow) to maintain pixel-perfect control over SVG generation.
- The main
App.jsxhandles global state via a centralizeddiagramDataobject (nodesandedges). - It controls the properties panel, theme togglers, and imports/exports XML payloads.
- Node Bindings: We implemented a
bindToattribute where nodes can be mathematically anchored to strings ("top", "bottom", "left", "right") of other nodes. When you drag a parent, all children compute their relative offset and move seamlessly.
- Computes
computedNodeson the fly to process bindings before rendering. - Text Wrapping (
getFittedText): Native SVG does not support CSS word wrapping. We implemented an invisible HTML5 canvas measurement engine that pre-calculates the exact point text should wrap, limiting to 3 lines before naturally shrinking thefont-size. - Bezier Edge Routing (
calculatePath): Instead of relying on Dagre or external routing plugins, we calculate adaptive cubic bezier curves between elements. The system evaluates the bounding boxes of the source and target node and snaps the wire to the most logical face dynamically depending on whether the node is placed above, below, left, or right.
- Standard DAG routing algorithms (like dagre/graphviz) destroy the user's intended layout by forcing hierarchical layouts.
applyGridSmartAlignimplements an algorithmic compromise:- It preserves user intent by sorting nodes topologically using their manual X/Y coordinates via clustering.
- It snaps nodes into "Levels" and "Tracks" (a rigid 2D matrix) ensuring strict visual uniformity required by print book standards without completely scrambling the user's visual narrative.
- A strict design mode converting the application to a Grayscale, 1pt line-width constraint removing all decorative drop-shadows and gradients. This enables artists to design for the monitor and seamlessly export flat illustrations for monochrome printing.
All diagram logic is centralized in src/utils/diagramSchemas.js. This is the Single Source of Truth for the UI constraints, node validations, and the LLM prompts.
Documentation is auto-generated by running node scripts/generate-docs.js.
To maintain the engine standard, remember these mappings between the internal format and the Web GUI:
process= The standard Block / Rectangle shape (historically named after flowchart "process" steps).pie_slice= The uniform pie segment.rhombus= The mathematical diamond shape.
The editor constructs dynamic diagrams via .cci JSON payloads. To view the supported nodes, edges, color mappings, and structure, refer to the auto-generated documentation in docs/cci_format_spec.md and docs/user_guide.md.