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

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