Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hikerpig/pintora

An extensible text-to-diagrams library that works in both browser and node.js
https://github.com/hikerpig/pintora

diagram diagram-as-code mermaidjs

Last synced: 2 days ago
JSON representation

An extensible text-to-diagrams library that works in both browser and node.js

Host: GitHub
URL: https://github.com/hikerpig/pintora
Owner: hikerpig
License: mit
Created: 2021-05-13T06:03:57.000Z (over 3 years ago)
Default Branch: master
Last Pushed: 2024-12-09T15:27:06.000Z (5 days ago)
Last Synced: 2024-12-10T09:38:48.118Z (4 days ago)
Topics: diagram, diagram-as-code, mermaidjs
Language: TypeScript
Homepage: https://pintorajs.vercel.app
Size: 8.38 MB
Stars: 1,129
Watchers: 11
Forks: 24
Open Issues: 32
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.txt

Awesome Lists containing this project

awesome-node-based-uis - pintora - Text-to-diagrams library (Javascript Libraries / Misc)

README

# 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](https://mermaid-js.github.io/mermaid/#/) and [PlantUML](https://plantuml.com/).

## ✨ 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](https://pintorajs.vercel.app/docs/advanced/write-a-custom-diagram/).

### 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](http://pintorajs.vercel.app/docs/intro/) for more details.

## 💻 Editor Support

- VSCode extension [pintora-vscode](https://marketplace.visualstudio.com/items?itemName=hikerpig.pintora-vscode), providing syntax highlight and preview support for `.pintora` file and markdown code fence.

## Related Projects

- [gatsby-remark-pintora](https://github.com/hikerpig/gatsby-remark-pintora) A gatsby remark plugin for converting pintora codeblock to diagrams in markdown files.
- [Pintora.js - Diagram as text / hikerpig / Observable](https://observablehq.com/@hikerpig/pintora-js-diagram-as-text), use pintora in Observable interactive notebook.
- [pintora-stencil - Pintora Web Components](https://github.com/hikerpig/pintora-stencil), web component for showing pintora diagram preview, add it into your website simply by import some script tags.
- [obsidian-pintora](https://github.com/amiaslee/obsidian-pintora), created by [@amiaslee](https://github.com/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

- [x] Sequence Diagram and Entity Relationship Diagram
- [x] Pintora node.js cli
- [x] PlantUML style Component diagram
- [x] Theme config
- [x] PlantUML style Activity Diagram
- [x] Mind Map
- [x] Gantt Diagram
- [x] 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](https://github.com/hikerpig/pintora/discussions).