pintora

Pintora

Documentation | Live Editor

pintora Spanish for "female painter"

Pintora is an extensible javascript text-to-diagrams library that works in both browser and Node.js.

Expressing your thoughts in a diagram is better than a thousand words. With the help of pintora.js, you can create diagrams with intuitive text.

Heavily inspired by Mermaid.js and PlantUML.

✨ Features

• In browser side, output SVG or Canvas.
• In Node.js side, output PNG/JPG/SVG file.
• Outputs are clean and self contained, won't pollute the page with global style.
• Modular and highly extensible, provide a plugin system for diagram developer to write and distribute their own diagrams. Here is a tutorial Write a custom diagram | Pintora.

Diagram types

  name
  preview






  Sequence Diagram
  
    
  




  Entity Relationship Diagram
  
    
  




  Component Diagram
  
    
  




  Activity Diagram
  
    
  




  Mind Map
  
    
  




  Gantt Diagram
  
    
  




  DOT Diagram
  
    
  




  Class Diagram

Documentation

Check the online documentation and demo for more details.

Editor Support

• VSCode extension pintora-vscode, providing syntax highlight and preview support for .pintora file and markdown code fence.

Related Projects

• gatsby-remark-pintora A gatsby remark plugin for converting pintora codeblock to diagrams in markdown files.
• Pintora.js - Diagram as text / hikerpig / Observable, use pintora in Observable interactive notebook.
• pintora-stencil - Pintora Web Components, web component for showing pintora diagram preview, add it into your website simply by import some script tags.
• obsidian-pintora, created by @amiaslee. An Obsidian plugin based on Pintora, which allows users to create diagrams using Pintora syntax directly in the Obsidian editor. It's local, secure, fast, and easy to use.

Roadmap

• Sequence Diagram and Entity Relationship Diagram
• Pintora node.js cli
• PlantUML style Component diagram
• Theme config
• PlantUML style Activity Diagram
• Mind Map
• Gantt Diagram
• Class Diagram
• Universal style customization solution
• Load diagram implementation and canvas renderer only when needed

If you have good thoughts or feature requests, please feel free to start a new discussion.