pintora

Pintora is a JavaScript text-to-diagrams library designed to work in both browser and Node.js environments. It allows you to create diagrams using intuitive text syntax, heavily inspired by Mermaid.js and PlantUML.

Key Capabilities

• Browser Support: Renders diagrams as SVG or Canvas.
• Node.js Support: Renders diagrams as PNG, JPG, or SVG files.
• Modular Architecture: The core is lightweight; specific diagram implementations are loaded only when needed.
• Extensibility: Includes a plugin system for developers to create and distribute custom diagram types.

Pintora is an extensible JavaScript text-to-diagrams library designed to work in both browser and Node.js environments. It allows users to create various diagrams using intuitive text syntax, drawing inspiration from Mermaid.js and PlantUML.

Key capabilities include:

• Browser Support: Outputs diagrams as SVG or Canvas.
• Node.js Support: Outputs diagrams as PNG, JPG, or SVG files.
• Clean Outputs: Generated diagrams are self-contained and do not pollute the host page with global styles.
• Extensibility: Features a modular plugin system that allows developers to write and distribute their own diagram types.

The @pintora/target-wintercg package is designed to bundle Pintora and its dependencies, along with necessary Node.js module polyfills, into a single large JavaScript file. This allows Pintora to run within WinterCG-compliant or other lightweight JavaScript runtimes.

Note: This package is currently in a very early stage of development.

The @pintora/standalone package is a version of Pintora that comes with all diagram implementations pre-bundled. This makes it the easiest way to get started if you want to support multiple diagram types without manually loading individual implementations.

Pintora is a text-to-diagrams library that works in both the browser and Node.js. It is inspired by Mermaid.js and PlantUML.

Relationships in ER diagrams can be classified by how they handle identity:

• Identifying relationships: Rendered with solid lines. Use these when an entity cannot exist independently of the related entity.
• Non-identifying relationships: Rendered with dashed lines.

Pintora uses a multi-stage event propagation system to transform low-level DOM/Canvas interactions into high-level diagram logic events. The flow is as follows:

1. DOM Event: Captured by @antv/g (the underlying canvas library).
2. IGraphicEvent: The IRenderer relates the canvas shape to a Pintora mark and emits this event.
3. IDiagramEvent: The IDiagram performs 'recognition', mapping the graphic mark to specific logic data (e.g., an entity in an ER diagram).
4. Listener: The event is finally delivered to your registered callback via pintora.diagramEventManager or local eventsHandlers.

This allows you to respond to interactions with domain-specific data (like an entity's name) rather than just raw coordinates or canvas shapes.

Every Pintora diagram must begin with a declaration of the diagram type. This declaration is followed by the specific definitions of the diagram elements and their relationships. The diagram type determines which DSL (Domain Specific Language) rules are applied to the content that follows.

componentDiagram
  [Pintora] --> [DiagramRegistry] : Get diagram by type

Cardinality defines the numerical attributes of the relationship between two entities. In Pintora, cardinality markers consist of two characters: the outermost character represents the maximum value, and the innermost character represents the minimum value.

When using the @style directive, you can select elements using two types of selectors:

1. .class: Selects elements by their assigned style class.
2. #id: Selects specific elements by their unique ID. Note that ID naming conventions vary depending on the specific chart type being used.

Pintora uses a layered abstraction model to transform textual DSL (Domain Specific Language) into visual diagrams. The workflow follows this pipeline:

1. Input Text: The raw diagram description.
2. IDiagramParser: Converts the text into a DiagramIR (Intermediate Representation).
3. DiagramIR: A logical data structure representing the specific diagram type (e.g., entities in an ER diagram).
4. IDiagramArtist: Converts the DiagramIR into a GraphicsIR.
5. GraphicsIR: A visual representation format containing geometric primitives (marks).
6. IRenderer: Converts the GraphicsIR into the final output (e.g., SVG or Canvas).

Input Text
    |
    |  () IDiagramParser
    v
 DiagramIR
    |
    |  () IDiagramArtist
    v
 GraphicsIR
    |
    |  IRenderer
    v
  Output