DOCSEARCHbyAlgolia
Submit Docs

Pintora Documentation

website·Indexed 29 days ago

https://pintorajs.vercel.app/

Pintora is a JavaScript text-to-diagrams library that works in both the browser and Node.js. It supports various diagram types including Sequence, Entity Relationship, Gantt, DOT, Activity, Class, and Component diagrams. The library provides output in SVG and Canvas for browsers, and PNG, JPG, or SVG files for Node.js. It also offers a VSCode extension (pintora-vscode), a CLI (@pintora/cli), and Web Components via pintora-stencil.

Tokens
20.1K
Snippets
137
Records
156
Agent score
72%

What's inside Pintora

  1. Overview of Sequence Diagram syntax in Pintora

    Pintora supports Sequence Diagrams based on the Mermaid 8.9 syntax. In addition to standard Mermaid functionality, it provides extended features such as multiline notes, multiline message text, color-grouped messages, dividers, participant boxes, configuration overrides, and experimental classifier types.

  3. Implement Gantt Diagrams using Pintora

    Pintora supports Gantt diagrams for illustrating project schedules, including activity dependency relationships and schedule status. The syntax and layout logic for these diagrams are based on Mermaid version 8.14, although some subtle differences may exist.

  4. Understand the Pintora event handling pipeline

    Pintora processes events in a reverse order of its rendering pipeline, transforming low-level DOM events into high-level logic events. The flow is as follows:

    1. DOM Event: Captured by the @antv/g canvas library, which emits a GraphEvent.
    2. IGraphicEvent: The IRenderer listens to the GraphEvent, maps the graphEvent.shape to a Pintora GraphicsIR mark, and emits an IGraphicEvent.
    3. IDiagramEvent: The IDiagram receives the IGraphicEvent and performs 'recognition' to map the mark to specific logic data within the DiagramIR. For example, in an ER diagram, this identifies if the clicked item is an 'entity' or a 'relationship'.
    4. Listener: The pintora.diagramEventManager finally delivers the IDiagramEvent to the end listener.

  5. Understand Pintora's diagram processing workflow

    Pintora processes diagrams through a multi-stage pipeline using Intermediate Representations (IR) to decouple the textual definition from the final visual rendering:

    1. Input Text $\rightarrow$ IDiagramParser $\rightarrow$ DiagramIR: The parser converts the textual DSL into logical data (DiagramIR) specific to that diagram type.
    2. DiagramIR $\rightarrow$ IDiagramArtist $\rightarrow$ GraphicsIR: The artist converts logical data into a platform-agnostic visual representation (GraphicsIR).
    3. GraphicsIR $\rightarrow$ IRenderer $\rightarrow$ Output: The renderer converts the visual description into the final output (e.g., Canvas or SVG via @antv/g).

  6. Annotate classes in Pintora class diagrams

    Use markers enclosed in double angle brackets (<< >>) to provide metadata about a class, such as identifying it as an interface or an enumeration.

    Common annotations include:

    • <<interface>>: Represents an interface class.
    • <<enumeration>>: Represents an enum.

    Annotations can be declared on a separate line following the class definition or placed inside the class body.

    classDiagram
  class Shape
  <<interface>> Shape
  Shape : vertices
  Shape : draw()

  class Color {
    <<enumeration>>
    Red
    Green
    Blue
  }

  8. Extend Mind Map functionality with custom diagrams

    The system is designed to be highly extensible through a plugin system, allowing developers to write and distribute their own custom diagram implementations. The core is kept lightweight by loading specific diagram implementations only when they are needed.

  9. Implement inheritance in ER diagrams

    Use the inherit keyword in an erDiagram to specify specialization or inheritance between entities. This allows a child entity to inherit attributes from a parent entity, following the extended entity-relationship model. You can define additional attributes for the child entity separately after declaring the inheritance.
    erDiagram
  person {
    int age
    string phone_number
  }

  customer inherit person
  deliverer inherit person

  %% Define additional attributes for the child entity
  customer {
    string address
  }

  11. Implement parallel processing in Pintora activity diagrams

    Use the fork, forkagain, endfork, and endmerge keywords to denote parallel processing within an activityDiagram.

    • fork: Starts the first parallel branch.
    • forkagain: Starts subsequent parallel branches.
    • endfork or endmerge: Closes the parallel section and merges the flow back into a single path.
    activityDiagram
  start
  fork
    :Action 1;
  forkagain
    :Action 2;
  forkagain
    :Action 3;
  endfork
  end

  12. Test a custom Pintora pie chart diagram in HTML

    To test a custom pie chart diagram, package the source code into a UMD bundle (e.g., dist/pintora-diagram-pie-chart.umd.js). When implementing the test page, ensure the global pintora object is loaded before the custom diagram script to allow the plugin to register itself correctly. Initialize the browser environment using pintora.default.initBrowser() after all scripts have loaded.
    <section>
  
pie
    title Bag of Fruits
    "apple" 5
    "peach" 6
    "banana" 2

</section>

<!-- Load Pintora standalone first -->
<script src="https://cdn.jsdelivr.net/npm/@pintora/standalone/lib/pintora-standalone.umd.js"></script>
<!-- Load the custom diagram UMD bundle -->
<script src="./dist/pintora-diagram-pie-chart.umd.js"></script>
<script>
  pintora.default.initBrowser()
</script>