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

• Sequence Diagram
• Entity Relationship Diagram
• Component Diagram
• Activity Diagram
• Mind Map
• Gantt Diagram

name	preview
Sequence Diagram
Entity Relationship Diagram
Component Diagram
Activity Diagram
Mind Map
Gantt Diagram
DOT 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.

🔭 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.