hikerpig / pintora Goto Github PK

View Code? Open in Web Editor NEW

765.0 9.0 16.0 7.56 MB

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

Home Page: https://pintorajs.vercel.app

License: MIT License

TypeScript 71.26% JavaScript 11.33% Nearley 7.82% Shell 0.07% Less 0.04% CSS 0.47% MDX 9.00%

diagram diagram-as-code mermaidjs

pintora's Introduction

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.

🔭 Roadmap

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

pintora's People

Contributors

Stargazers

Watchers

Forkers

alexandermykulych a1ip thebergamo edydkim frankfanslc spread0x fengweijp alexlaforge nuwansa gg-big-org asavienko sudoki2015 devopstoday11 s7245 reanimatedmanx teleki

pintora's Issues

How to escape special characters in text

Sometimes I need to use special characters such as ':', '[', ']' or wrapping text with quotes, Pintora throws a syntax error. For example:

componentDiagram
  [Triggering a syntax error with an escaped colon:]

triggers an error

I tried escaping the characters with a single \ a double \\, or wrapping the whole text with quotes.

The only way I managed to make it work is by using HTML entities, but it only works when using SVG.

Is there a way to escape text?

[activityDiagram] Incorrect display for nested group

This bug is on master branch and not released yet

activityDiagram
partition Outer {
  :outer action;

  group Inner {
    :some action;
  }
}

ReferenceError: CanvasPattern is not defined while using standalone version

Hi, I love this tool, but I have been having trouble while using the CLI standalone version.
I have no problem using the VSCode extension, but when I try to use the render command I get an error:

➜  documentation-pintora node --version
v16.13.2
➜  documentation-pintora npm i -g @pintora/cli

changed 188 packages, and audited 189 packages in 21s

9 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
➜  documentation-pintora pintora render --input ./input.pintora --output ./output/test.png
/Users/administrador/.nvm/versions/node/v16.13.2/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t||self).pintora={})}(this,function(t){var e={__pro ....
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            

ReferenceError: CanvasPattern is not defined
    at WM (/Users/administrador/.nvm/versions/node/v16.13.2/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1:501623)
    at tE (/Users/administrador/.nvm/versions/node/v16.13.2/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1:504326)
    at e.draw (/Users/administrador/.nvm/versions/node/v16.13.2/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1:508895)
    at eE (/Users/administrador/.nvm/versions/node/v16.13.2/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1:504457)
    at e.draw (/Users/administrador/.nvm/versions/node/v16.13.2/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1:507588)
    at eE (/Users/administrador/.nvm/versions/node/v16.13.2/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1:504457)
    at e._drawRegion (/Users/administrador/.nvm/versions/node/v16.13.2/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1:531469)
    at Timeout._onTimeout (/Users/administrador/.nvm/versions/node/v16.13.2/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1:531883)
    at listOnTimeout (node:internal/timers:557:17)
    at processTimers (node:internal/timers:500:7)
➜  documentation-pintora

Is it something to do with my dependencies? Is there anyway to fix it? Any help would be appreciated, and I can provide further information.

Syntax error in Mindmap when '-' is included in multiline text

The mind map syntax concept is wonderful and just what I have been looking for!
However, it has a small glitch -- the multiline text does not accept a hyphen character (ie '-').
I am afraid I do not know enough of Javascript, let alone Typescript to fix this.

The following code:

mindmap
+ Animals
++ Cat
++ Prairie-dog
++ :Jack-rabbit,
    Jack-russell;

Using pintora CLI, generated the following:

onError Error: Syntax error at line 5 col 9:

  ++ :Jack-
          ^
Unexpected MINUS token: "-". Instead, I was expecting to see one of the following:

A VALID_TEXT token based on:
    multilineText$ebnf$1$subexpression$1 →  ● %VALID_TEXT
    multilineText$ebnf$1 → multilineText$ebnf$1 ● multilineText$ebnf$1$subexpression$1
    multilineText →  ● multilineText$ebnf$1
    statement → levelNotation %WS %COLON ● multilineText %SEMICOLON statement$ebnf$1 %NL
    line → line$ebnf$1 ● statement
    document → document ● line
    start → "mindmap" ● document
A WS token based on:
    multilineText$ebnf$1$subexpression$1 →  ● %WS
    multilineText$ebnf$1 → multilineText$ebnf$1 ● multilineText$ebnf$1$subexpression$1
    multilineText →  ● multilineText$ebnf$1
    statement → levelNotation %WS %COLON ● multilineText %SEMICOLON statement$ebnf$1 %NL
    line → line$ebnf$1 ● statement
    document → document ● line
    start → "mindmap" ● document
A NL token based on:
    multilineText$ebnf$1$subexpression$1 →  ● %NL
    multilineText$ebnf$1 → multilineText$ebnf$1 ● multilineText$ebnf$1$subexpression$1
    multilineText →  ● multilineText$ebnf$1
    statement → levelNotation %WS %COLON ● multilineText %SEMICOLON statement$ebnf$1 %NL
    line → line$ebnf$1 ● statement
    document → document ● line
    start → "mindmap" ● document
A SEMICOLON token based on:
    statement → levelNotation %WS %COLON multilineText ● %SEMICOLON statement$ebnf$1 %NL
    line → line$ebnf$1 ● statement
    document → document ● line
    start → "mindmap" ● document

    at i.feed (/usr/local/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1:107678)
    at /usr/local/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1:110646
    at Object.parse (/usr/local/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1:347408)
    at ae (/usr/local/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1:40697)
    at Object.renderTo (/usr/local/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1:535757)
    at /usr/local/lib/node_modules/@pintora/cli/lib/render.js:34:48
    at new Promise (<anonymous>)
    at pintorRender (/usr/local/lib/node_modules/@pintora/cli/lib/render.js:33:20)
    at /usr/local/lib/node_modules/@pintora/cli/lib/render.js:67:17
    at new Promise (<anonymous>) {
  offset: 20,
  token: {
    type: 'MINUS',
    value: '-',
    text: '-',
    toString: [Function: d],
    offset: 48,
    lineBreaks: 0,
    line: 5,
    col: 9
  }
}
pintora render

Render DSL to diagram image

Options:
      --version           Show version number                          [boolean]
      --help              Show help                                    [boolean]
  -i, --input             Input file path                             [required]
  -o, --output            Output file path
  -p, --pixel-ratio       Pixel ratio                               [default: 2]
  -b, --background-color  Background color
  -t, --theme             Pintora theme                     [default: "default"]
  -w, --width             Width of output image

Error: Syntax error at line 5 col 9:

  ++ :Jack-
          ^
Unexpected MINUS token: "-". Instead, I was expecting to see one of the following:

A VALID_TEXT token based on:
    multilineText$ebnf$1$subexpression$1 →  ● %VALID_TEXT
    multilineText$ebnf$1 → multilineText$ebnf$1 ● multilineText$ebnf$1$subexpression$1
    multilineText →  ● multilineText$ebnf$1
    statement → levelNotation %WS %COLON ● multilineText %SEMICOLON statement$ebnf$1 %NL
    line → line$ebnf$1 ● statement
    document → document ● line
    start → "mindmap" ● document
A WS token based on:
    multilineText$ebnf$1$subexpression$1 →  ● %WS
    multilineText$ebnf$1 → multilineText$ebnf$1 ● multilineText$ebnf$1$subexpression$1
    multilineText →  ● multilineText$ebnf$1
    statement → levelNotation %WS %COLON ● multilineText %SEMICOLON statement$ebnf$1 %NL
    line → line$ebnf$1 ● statement
    document → document ● line
    start → "mindmap" ● document
A NL token based on:
    multilineText$ebnf$1$subexpression$1 →  ● %NL
    multilineText$ebnf$1 → multilineText$ebnf$1 ● multilineText$ebnf$1$subexpression$1
    multilineText →  ● multilineText$ebnf$1
    statement → levelNotation %WS %COLON ● multilineText %SEMICOLON statement$ebnf$1 %NL
    line → line$ebnf$1 ● statement
    document → document ● line
    start → "mindmap" ● document
A SEMICOLON token based on:
    statement → levelNotation %WS %COLON multilineText ● %SEMICOLON statement$ebnf$1 %NL
    line → line$ebnf$1 ● statement
    document → document ● line
    start → "mindmap" ● document

    at i.feed (/usr/local/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1:107678)
    at /usr/local/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1:110646
    at Object.parse (/usr/local/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1:347408)
    at ae (/usr/local/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1:40697)
    at Object.renderTo (/usr/local/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1:535757)
    at /usr/local/lib/node_modules/@pintora/cli/lib/render.js:34:48
    at new Promise (<anonymous>)
    at pintorRender (/usr/local/lib/node_modules/@pintora/cli/lib/render.js:33:20)
    at /usr/local/lib/node_modules/@pintora/cli/lib/render.js:67:17
    at new Promise (<anonymous>) {
  offset: 20,
  token: {
    type: 'MINUS',
    value: '-',
    text: '-',
    toString: [Function: d],
    offset: 48,
    lineBreaks: 0,
    line: 5,
    col: 9
  }
}

I see a similar error when trying the same code in Pintora Live Editor:

@https://pintorajs.vercel.app/demo/assets/client.js:39:1070
@https://pintorajs.vercel.app/demo/assets/client.js:44:10
parse@https://pintorajs.vercel.app/demo/assets/client.js:47:37398
Vg@https://pintorajs.vercel.app/demo/assets/client.js:11:17577
renderTo@https://pintorajs.vercel.app/demo/assets/client.js:62:6493
@https://pintorajs.vercel.app/demo/assets/client.js:62:8540
vf@https://pintorajs.vercel.app/demo/assets/client.js:85:24435
Fi@https://pintorajs.vercel.app/demo/assets/client.js:85:42732
iR@https://pintorajs.vercel.app/demo/assets/client.js:85:41513
go@https://pintorajs.vercel.app/demo/assets/client.js:85:40539
tx@https://pintorajs.vercel.app/demo/assets/client.js:85:37120
tx@[native code]
so@https://pintorajs.vercel.app/demo/assets/client.js:83:3275
@https://pintorajs.vercel.app/demo/assets/client.js:85:34473

Support title for most of the diagrams

Try to support title for most of the diagrams

title: Some text

sequenceDiagram
activityiagram
erDiagram
componentDiagram
mindmap

For other diagrams (dotDiagram, ganttDiagram), they already have its own title syntax so I won't add duplicates.

classDiagram: Add support for typing (python)

Minimal example

classDiagram
  class Foo {
  }

  class Bar {
    Optional[Foo] foo
  }

This fails. Although Optional[Foo] is the correct type.

I could not find a way to quote or escape it.

Feature: activityDiagram

Based on PlantUML https://plantuml.com/en/activity-diagram-beta

v0.1.0-alpha.11 has a basic and crude version, and there are still some interesting features:

basic, with action/while/condition/switch/note/group
~~Swimlanes , let's move this to another feature, requires dagre-layout support~~
Parallel processing , v0.1.0-alpha.14

Config per render

Currently the setConfig api will change global config - which is inconvinient if one only wants to apply it to one diagram.

We should be able to set config in one render , pass it to the artist, without poluting the global config.

pintora.default.renderTo(code, {
  container,
  config: {
    themeConfig: { theme: 'dark' },
    mindmap: {
       ....
     }
  }
})

Strange Connections to Outside

The following activity diagram has some strange lines to the outside:

activityDiagram
    title: Test Activity
    start
        partition allmystuff {
            if(source newer that target?) then
                :Convert Source to Target;
            else (no)
            endif

            partition #0000ff repeat {
                if(source newer that target?) then
                    :Convert Source to Target;
                else (no)
                endif
            }
        }
    end

`noteBackground` in `sequenceDiagram` is not adjustable

Hi there :)

When using the themeConfig in a sequenceDiagram, it seems as if the noteBackground color is not adjustable. Instead, it is always rendered yellow. You can find a minimal example for reproducing the issue below.

Source code

sequenceDiagram
  @config({
     "themeConfig": {
       "themeVariables": {
         "noteBackground": "#ff0000"
       }
     }
  })
  A->>B: Hi, this is a minimal example.

  @note over A,B: My background is not red :(

Rendered sequence diagram

classDiagram: Add support for commas in method argument

Minimal example

classDiagram
  class Foo {
    void foo(a: int, b: int)
  }

Some programming languages use commas to separate arguments of methods.

I could not find a way to quote or escape it.

Incredibly hard to use compared to Mermaid

For example, you have to escape < and > when using @pintora/cli. Additionally you cannot have characters like - hyphens, e.g. in notes. Just filing here, we came to Pintora as an alternative to Mermaid, albeit there are many issues as you can see we've filed #241 #240.

electron standalone version

Save and open local files.

any plan?

Using Pintora as a library in Node.js

Hi,
I moved from Mermaid to Pintora for my blog in Astro because I need SSR (see mermaid-js/mermaid#3650), and solutions involving pupeteer end up with a result which is not consistent across browsers, contrary to what I've seen with Pintora.

However, the documentation to use Pintora as a library is really confusing (or non-existent), it's designed to be used in Node.js as a CLI only, not a as a library.

I circumvented the issue to generate an SVG from a string in a Node.js script by importing the render function from '@pintora/cli':

import {render} from '@pintora/cli'
import type {PintoraConfig} from '@pintora/standalone'

const buildSVG = async (code: string, config: PintoraConfig) => {
  const result = await render({
    code: code,
    pintoraConfig: config,
    mimeType: 'image/svg+xml'
  })
}

In the API usage documentation, there is no mention of how to use the CLI's Node.js APIs, and no mention of how to use the '@pintora/standalone' package to generate an SVG from a string.

I would suggest to either:

document the API of '@pintora/cli'
or to embed within '@pintora/standalone' the render function from '@pintora/cli' which allows using it in a Node.js script.

Style system

Could we assign theme and diagram style in a general style system, and move them to a .pintora-style file, instead of spreading over arbitrary config and artist.

For reference:

https://plantuml.com/zh/style-evolution

You should probably claim/publish `pintora` as a npm package to prevent npm install malicious attack vector

Even if the package is empty, it could contain README with notes as to how to use pintora via @pintora scoped packages.

[Doc] A tutorial for adding custom diagram types

This tutorial should cover:

Brief introduction of how pintora works, how DiagramIR and GraphicsIR are layered in the process, and how to implement parser and artist.
How to register a custom diagram - say a simple mermaid-style pie chart - in a separate project
- Current published package is kindof flawed, I need to adjust the exports a little
Add an example repository for code in the tutorial.

activity diagram: else arrow description is wrong

Tried this code inside the live editor:

activityDiagram
title: test


if (color?) then (red)
    :print red;
else (green)
    :print green;
endif

Expected behavior: print green on the else case.
Problem: else case print's no on the error. See image.

Also tested this syntax, but this didn't even compile:

activityDiagram
title: test


if (color?) is (red) then
    :print red;
else (green)
    :print green;
endif

Feature: PlantUML style deploy diagram

Feature Request: support WinterCG environment

Seperating from issue #225 .

It'd be cool if pintora can run in WinterCG environment.

Maybe I can start with trying to run pintora in https://github.com/wasmerio/winterjs

Support notes for most of the diagrams

Feature: subset of DOT, general directed graph

This may not be 100% compatible with Mermaid flowChart, since the latter is somehow a mixture of directed graph and activity diagram.
The parser should be able to parse as much as DOT language as possible, even though some features - such as ports - will not be supported

Should be able to draw a general directed graph to show

module dependencies
task dependencies

VSCode plugin does not do the same as online editor

The code from the website: https://pintorajs.vercel.app/docs/diagrams/er-diagram/

does not work in the VSCode plugin

随便的标题啊啊啊啊啊

描述。

[BUG] Incorrect display of forks in groups in activity diagrams

In the activity diagram, when a fork is inside a group, the fork node and the join node are not long enough.

Here is the tested code:

activityDiagram
title: Fork inside group test
start
group Group {
  fork
    :a;
  forkagain
    :b;
  endfork
}
end

Here is an online example of the code above.

Side effects when setting the theme using '@pintora/cli' `render` function

When using consecutively the render function from @pintora/cli, parameters set on the pintoraConfig in previous function calls pollute the next calls:

import { render } from '@pintora/cli'
import * as fs from 'fs'

const buildDark = async (code) => {
  const str = await render({
    code: code,
    pintoraConfig: {
      themeConfig: {
        theme: 'dark'
      }
    },
    mimeType: 'image/png',
  })
  fs.writeFileSync('dark.png', str)
}

const buildDefault = async (code) => {
  const buf = await render({
    code: code,
    mimeType: 'image/png',
  })
  fs.writeFileSync('default.png', buf)
}

const code = `
activityDiagram
start
:render functionl called;
if (is mimeType image/svg+xml ?) then
  :renderer svg;
  :render with jsdom;
  :generate string;
else (no)
  :renderer canvas;
  :render with node-canvas;
  :generate image buffer by mimeType;
endif

:return result;

end
`

buildDark(code)

buildDefault(code)

It produces two files dark.png which uses the dark theme, and default.png which should use the default theme but does not: it uses also the dark theme.

However, if the same code is executed without calling buildDark or with buildDark called after buildDefault it works as expected.

[componentDiagram] group type is always displayed in brackets in the bottom-left corner of the group

Hi !

Thanks again for the great work.

Would it be possible to avoid displaying the group type in component diagrams in the bottom-left corner [rectangle]?

componentDiagram
    rectangle "my group" {
        [A] as A
        [B] as B
        [C] as C
        [D] as D
        B --> C
        A --> C
        C --> D
    }

Which renders as:

Is there an option I'm missing?

Feature Request: Support CSS variables for theming

I want to pre-render diagram as SVG and embed it in HTML. And I want to style SVG with the help of CSS variables, so that I can add support for dark theme using CSS.

I tried something like this:

const themeCSS = {
  primaryColor: `rgb(var(--primaryColor))`,
  secondaryColor: `rgb(var(--secondaryColor))`,
  tertiaryColor: `rgb(var(--tertiaryColor))`,

  lineColor: `rgb(var(--lineColor))`,

  primaryLineColor: `rgb(var(--primaryLineColor))`,
  secondaryLineColor: `rgb(var(--secondaryLineColor))`,

  textColor: `rgb(var(--textColor))`,
  primaryTextColor: `rgb(var(--primaryTextColor))`,
  secondaryTextColor: `rgb(var(--secondaryTextColor))`,
  teritaryTextColor: `rgb(var(--teritaryTextColor))`,

  primaryBorderColor: `rgb(var(--primaryBorderColor))`,
  secondaryBorderColor: `rgb(var(--secondaryBorderColor))`,
  tertiaryBorderColor: `rgb(var(--tertiaryBorderColor))`,

  canvasBackground: `rgb(var(--canvasBackground))`,
  background1: `rgb(var(--background1))`,
  lightestBackground: `rgb(var(--lightestBackground))`,
  groupBackground: `rgb(var(--groupBackground))`,

  noteBackground: `rgb(var(--noteBackground))`,
  noteTextColor: `rgb(var(--noteTextColor))`,
};

But it won't work because some diagrams use tinycolor

pintora/packages/pintora-diagrams/src/class/config.ts

Lines 66 to 83 in 8ec6708

 getConfigFromTheme(t) { 

 const primaryCorlorInstance = tinycolor(t.primaryColor) 

 const canvasBgInstance = tinycolor(t.canvasBackground || PALETTE.white) 

 const isBgLight = canvasBgInstance.isLight() 

 let relationLineColor: string 

 if (isBgLight) { 

 relationLineColor = PALETTE.normalDark 

 } else { 

 relationLineColor = PALETTE.white 

 } 

 const entityBodyBackground = primaryCorlorInstance.brighten(60).toHexString() 

 return { 

 entityBackground: t.primaryColor, 

 entityBodyBackground, 

 relationLineColor, 

 } 

 },

Feature: [erDiagram] add comment for attribute

It's nice that you can do this in mermaid

erDiagram
    CAR ||--o{ NAMED-DRIVER : allows
    CAR {
        string allowedDriver UK "The license of the allowed driver"
        string registrationNumber
        string make
        string model
    }
    PERSON ||--o{ NAMED-DRIVER : is
    PERSON {
        string driversLicense PK "The license #"
        string firstName
        string lastName
        int age
    }

Feature request: accessibility

Motivating example

https://mermaid.js.org/config/accessibility.html

  graph LR
      accTitle: This is the accessible title
      accDescr: This is an accessible description
      A[Identify Big Decision] --> B{Make Big Decision}
      B --> D[Be done]

Explanation

In Mermaid one can add accTitle and accDescr, which then can be used like this

<svg
  aria-labelledby="chart-title-mermaid-1668725057758"
  aria-describedby="chart-desc-mermaid-1668725057758"
  xmlns="http://www.w3.org/2000/svg"
  width="100%"
  id="mermaid-1668725057758"
>
  <title id="chart-title-mermaid-1668725057758">This is the accessible title</title>
  <desc id="chart-desc-mermaid-1668725057758">This is an accessible description</desc>
</svg>

For SVG it would just work, but for images (server side rendering) it would need to be exposed, for example, like this:

const { content, title, description } = render(config)

And as long as we are here it could also expose width and height for generated image

const { width, height, content, title, description } = render(config)

Feature: `useMaxWidth` option for diagrams

One of mermaid.js diagrams' common config useMaxWidth, the diagram can expand to as wide as the container.

Could be useful fitting the diagram to the container.

This config can be set through core config, or each diagram's config

pintoraStandalone.setConfig({
  core: { useMaxWidth: true },
  // or
  sequence: {
	useMaxWidth: true
  }
})

If you are using @pintora/standalone renderTo() function, it will get containerSize for you

  const containerSize = {
    width: container.clientWidth,
  }
  drawResult = pintoraStandalone.parseAndDraw(code, safeAssign<RenderToOptions>({ containerSize }, options))

If you are using the @pintora/cli, canvas width can be assigned by --width argument

pintora render -i ../test-shared/example-files/sequence.pintora --width 1000 -o sequence-w-1000.jpg

Feature: Gantt diagram

References:

Optimize current grammar files

Current nearley grammar rule requires inserting _ or __ by hand, otherwise the parser will fail when encountering an extra space. This is different from jison as the latter drops whitespaces for you.

And in pintora, whitespaces are not so important, so it's OK to skip them.

Best way to fight the missing white space rule problem is kach/nearley#549.

I should fork nearley and add a feature.

Do not pollute global scope in cli

According antv/g documentation it should be possible to avoid polluting global scope:

pintora/packages/pintora-cli/src/render.ts

Lines 35 to 37 in 8ec6708

 // setup the env for renderer 

 global.window = dom.window as any 

 global.document = document

PS. there are faster JSDOM alternatives, I wonder if it would have any impact on the performance:

When participant in sequence diagram starts with a number its position is ignored

Related mermaid-js/mermaid#3264

Feature: Class Diagram

Basic functionalities demonstrated in https://pintorajs.vercel.app/docs/diagrams/class-diagram/
Notes
draw modifier like {static}

Feature: Enhanced ER Diagram

Enhanced entity–relationship model
Got this idea from a mermaid issue.

Should support:

Subclass and superclass
- a inherit b

Feature Request: support c4model

pintora is cool~

maybe you could support c4 model one day

Typings of '@pintora/standalone' cannot be imported (IDE only)

When importing type PintoraConfig from '@pintora/standalone':

import type { PintoraConfig } from '@pintora/standalone'

I get the following error from my IDE Typescript inspection:

TS7016: Could not find a declaration file for module  @pintora/standalone .
/path/to/project/node_modules/@pintora/standalone/lib/pintora-standalone.esm.js
implicitly has an  any  type.
There are types at
/path/to/project/node_modules/@pintora/standalone/types/index.d.ts
, but this result could not be resolved when respecting package.json  exports . The  @pintora/standalone  library may need to update its package.json or typings.

However, when I do it from '@pintora/core/lib/config' it works fine.

This happens in WebStorm 2023.2.5, whether I use the bundled TS v5.1.3 or my package's TS v5.3.2, but the code runs fine either way.

Swimlanes for activity diagram

First of all, thanks for this project, it's awesome!

On the request: I miss the swimlanes in activity diagrams. It's expected to be added in Pintora sometime?

Unnecessary stroke around note text results in hard to read content

能否补充一些简写缩写方便输入

比如，在已知 componentDiagram 的情况下，

Interface 可以简写为 ()
component 却不能简单简写为 []

比如
component comp4 [
This component has
long description
]
如果简写为
[] comp4 [
This component has
long description
]
字符串解析其实是没疑问的，但实际上会报错。而改写为
[comp4
This component has
long description
]
则会把 'comp4' 也作为内容渲染出来。显然是不对的。

同样比如在已知 sequenceDiagram 的情况下

activate Pintora 和 deactivate Pintora
是否能使用相同的 !Pintora 切换，或者至少允许 !Pintora 和 !!Pintora 作为简写

@note left of ==> @nl 或者 @< 或者 @====< （等号任意多）
@note right of ==> @nr 或者 @> 或者 @====>
@end_note.==> @@

其它还有挺多可以简写的

[activityDiagram] Should draw a no-action-line when there is no else block

Using alt, loop or par in certain sequence diagrams generate excessive whitespace

Desired behavior

While using the alt, loop or par keywords in flow diagrams, the content of the generated boxes fit correctly.

Actual behavior

If an alt, loop or par blocks contain some components (self arrows seem to make it worse?), the generated box contains excessive whitespace.

Replication

Code

The following Pintora diagram (input.pintora) displays the problem:

sequenceDiagram
  participant [<box> service_1] as "Service 1"
  participant [<box> service_2] as "Service 2"
  participant [<box> service_3] as "Service 3"
  participant [<box> service_4] as "Service 4"
  service_1->>+service_2: req 0.........
  == some divider ==
  par #ffffff one
    service_2->>+service_3: .........req 1...........
    service_3->>+service_4: .........req 2...........
    service_4->>service_4: req 4
    service_4->>-service_3: req 3
    service_3->>-service_2: req 5
    service_2->>service_2: req 6
  end
  service_2->>-service_1:

Commands

➜  documentation-pintora node --version
v14.15.0
➜  documentation-pintora pintora --version
0.6.1
➜  documentation-pintora pintora render --input input.pintora --output output.png
✔ Render success, saved to output.png

Output

Live editor

Link

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Other Branches

These updates are pending. To force PRs open, click the checkbox below.

chore(deps): update actions/cache action to v4
chore(deps): update actions/checkout action to v4
chore(deps): update actions/setup-node action to v4
chore(deps): update codecov/codecov-action action to v4
chore(deps): update pnpm/action-setup action to v3

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

chore(deps): update dependency vite to v5.0.13 [security]
chore(deps): update pnpm to v8.15.8
chore(deps): update dependency vite-plugin-pwa to ^0.19.0
chore(deps): update dependency eslint to v9
chore(deps): update dependency readable-stream to v4
chore(deps): update pnpm to v9
fix(deps): update dependency daisyui to v4
fix(deps): update dependency prism-react-renderer to v2
Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

chore(deps): update dependency node to v20 (node, @types/node)
fix(deps): update dependency @antv/g-canvas to v2
fix(deps): update dependency @antv/g-svg to v2
fix(deps): update dependency yargs to v17 (yargs, @types/yargs)

Detected dependencies

github-actions

.github/workflows/ci-check.yml

runforesight/foresight-workflow-kit-action v1

actions/checkout v2

actions/setup-node v3

actions/cache v2

pnpm/action-setup v2.4.0

actions/cache v2

dorny/test-reporter v1

codecov/codecov-action v2

thundra-io/foresight-test-kit-action v1

nejcm/bundle-size-reporter-action v1.4.1

.github/workflows/update-tests.yml

actions/checkout v2

actions/setup-node v3

actions/cache v2

pnpm/action-setup v2.4.0

actions/cache v2

nejcm/bundle-size-reporter-action v1.4.1

nodenv

.node-version

node v18

npm

demo/package.json

@codemirror/basic-setup ^0.20.0

@codemirror/commands ^6.0.0

@codemirror/lang-javascript ^6.0.0

@codemirror/lang-json ^6.0.0

@codemirror/lint ^6.0.0

@codemirror/search ^6.0.0

@codemirror/state ^6.0.0

@codemirror/theme-one-dark ^6.0.0

@codemirror/tooltip ^0.19.16

@codemirror/view ^6.0.0

@react-hook/debounce ^4.0.0

@reduxjs/toolkit ^2.0.0

browser-fs-access ^0.35.0

classnames ^2.3.2

daisyui ^1.22.2

react ^18.2.0

react-dom ^18.2.0

react-error-boundary ^4.0.0

react-hot-toast ^2.4.0

react-redux ^9.0.0

react-router-dom ^6.3.0

shiki ^1.0.0

throttle-debounce ^5.0.0

usehooks-ts ^3.0.0

@percy/cli ^1.27.0

@percy/cypress ^3.1.2

@types/react ^18.0.8

@types/react-dom ^18.0.3

@types/throttle-debounce ^5.0.0

@vitejs/plugin-react-refresh ^1.3.6

autoprefixer *

cypress ^13.3.2

less ^4.1.3

postcss ^8.4.16

start-server-and-test ^2.0.0

tailwindcss ^3.1.8

typescript ^5.0.0

vite ^5.0.10

vite-plugin-pwa ^0.17.4

vite-tsconfig-paths ^4.0.0

workbox-core ^7.0.0

workbox-precaching ^7.0.0

workbox-window ^7.0.0

package.json

@changesets/changelog-git ^0.2.0

@changesets/cli ^2.24.1

@types/jest ^29.0.0

@typescript-eslint/eslint-plugin ^7.0.0

@typescript-eslint/parser ^7.0.0

codecov ^3.8.3

esbuild-jest ^0.5.0

eslint ^8.24.0

eslint-plugin-prettier ^5.0.0

eslint-plugin-unused-imports ^3.0.0

husky ^9.0.0

jest ^29.0.0

jest-junit ^16.0.0

lint-staged ^15.0.0

prettier ^3.0.3

rimraf 5.0.5

turbo ^1.11.3

typescript ^5.0.0

pnpm 8.15.6

packages/development-kit/package.json

shell-exec ^1.0.2

@types/node ^16.11.7

typescript ^5.0.0

@hikerpig/nearley ^2.21.0-beta.2

packages/pintora-cli/package.json

canvas ^2.11.2

consola ^3.0.0

jsdom ^24.0.0

mime-types ^2.1.31

yargs ^16.2.0

@types/jsdom ^21.0.0

@types/mime-types ^2.1.0

@types/node ^16.11.7

@types/yargs ^16.0.0

typescript ^5.0.0

packages/pintora-core/package.json

@antv/event-emitter ^0.1.2

@antv/matrix-util ^3.0.4

@types/node ^16.11.7

clone-deep ^4.0.1

deepmerge ^4.2.2

tinycolor2 ^1.4.2

@types/clone-deep ^4.0.1

@types/tinycolor2 ^1.4.3

typescript ^5.0.0

packages/pintora-diagrams/package.json

@hikerpig/moo ^0.5.2-beta.2

@hikerpig/nearley ^2.21.0-beta.1

@pintora/dagre ^0.10.10

@pintora/graphlib 2.2.2

d3-interpolate ^3.0.1

d3-scale ^4.0.2

d3-shape ^3.0.1

d3-time ^3.0.0

dayjs ^1.10.7

dedent ^1.0.0

@types/d3-interpolate ^3.0.1

@types/d3-scale ^4.0.2

@types/d3-shape ^3.0.2

@types/dedent ^0.7.0

@types/nearley ^2.11.1

@types/node ^16.11.7

@types/tinycolor2 ^1.4.3

esbuild ^0.20.0

esbuild-jest ^0.5.0

jest-environment-jsdom ^29.0.0

shell-exec ^1.0.2

typescript ^5.0.0

packages/pintora-renderer/package.json

@antv/g-canvas ^0.5.12

@antv/g-svg ^0.5.6

@types/node ^16.11.7

@antv/g-base ^0.5.11

typescript ^5.0.0

packages/pintora-standalone/package.json

@types/node ^16.11.39

@types/tinycolor2 ^1.4.3

esbuild ^0.20.0

microbundle ^0.15.1

tsx ^4.0.0

typescript ^5.0.0

packages/pintora-target-wintercg/package.json

@edge-runtime/types ^2.2.7

@types/fontkit ^2.0.6

@types/node ^16.11.7

@types/svgdom ^0.1.2

base64-js ^1.5.1

buffer ^6.0.3

edge-runtime ^2.5.7

esbuild ^0.20.0

esbuild-visualizer ^0.6.0

events ^3.3.0

fontkit ^2.0.2

ieee754 ^1.2.1

inherits ^2.0.4

path ^0.12.7

path-browserify ^1.0.1

punycode ^2.3.1

readable-stream ^3.5.0

signal-exit ^4.1.0

stream ^0.0.2

stream-browserify ^3.0.0

svgdom ^0.1.19

ts-node ^10.9.2

typescript ^5.0.0

url ^0.11.3

util ^0.12.5

packages/test-shared/package.json

website/package.json

@docusaurus/core ^3.0.1

@docusaurus/preset-classic ^3.0.1

@docusaurus/theme-common ^3.0.1

@mdx-js/react ^3.0.0

@svgr/webpack ^8.0.0

clsx ^2.0.0

docusaurus-plugin-less ^2.0.2

file-loader ^6.2.0

less-loader ^12.0.0

mdx-embed ^1.0.0

path-browserify ^1.0.1

prism-react-renderer ^1.2.1

react ^18.0.0

react-dom ^18.0.0

shiki ^1.0.0

url-loader ^4.1.1

@docusaurus/module-type-aliases ^3.0.0

@tsconfig/docusaurus ^2.0.2

@types/react ^18.0.0

@types/react-helmet ^6.1.5

@types/react-router-dom ^5.3.2

typescript ^5.0.0

Check this box to trigger a request for Renovate to run again on this repository

Quoted entity names

Could it be possible to enable usage of quotes as enetity names in erDiagram?
Mermaid forces me to use it if there is a special character or a space while here I must do many renames.
Thank you

Update the custom diagram tutorial, using nearley as parser generator

It'd be nice to reuse shared grammars like @config and @param directive in other packages for developing custom diagrams.

Try to do this in hikerpig/pintora-diagram-pie-chart#1

During this attempt, I may need to add or adjust some of @pintora/*'s exports.

Implementing event listener callbacks for click, hover, etc ...

I would like to use pintora in my angular app but need to be able to catch a click event as the user selects a different element of a graph to be edited dynamically

Is that part of the plans? I have seen any code related to this in the source tree

Thanks

[dotDiagram] subgraph label width

Subgraph should be at least as wide as it's label

dotDiagram
graph {

  subgraph cluster_ground_floor {
    bgcolor="lightgreen"
    label="Ground Floor Long"
    Lounge
    Kitchen
  }

  subgraph cluster_top_floor {
    bgcolor="lightyellow"
    label="Top Floor"
    Bedroom
  }

  Lounge -- Kitchen
}

Individual background color for components

For now pintora component diagrams can be customized by theme only, but sometimes it can be needed to colorize components individually or by "stereotype". Plantuml example:

	getConfigFromTheme(t) {
	const primaryCorlorInstance = tinycolor(t.primaryColor)
	const canvasBgInstance = tinycolor(t.canvasBackground \|\| PALETTE.white)
	const isBgLight = canvasBgInstance.isLight()
	let relationLineColor: string
	if (isBgLight) {
	relationLineColor = PALETTE.normalDark
	} else {
	relationLineColor = PALETTE.white
	}

	const entityBodyBackground = primaryCorlorInstance.brighten(60).toHexString()
	return {
	entityBackground: t.primaryColor,
	entityBodyBackground,
	relationLineColor,
	}
	},

	// setup the env for renderer
	global.window = dom.window as any
	global.document = document

hikerpig / pintora Goto Github PK

pintora's Introduction

Pintora

✨ Features

Diagram types

📖 Documentation

💻 Editor Support

Related Projects

🔭 Roadmap

pintora's People

Contributors

Stargazers

Watchers

Forkers

pintora's Issues

Minimal example

Source code

Rendered sequence diagram

Minimal example

Motivating example

Explanation

Desired behavior

Actual behavior

Replication

Code

Commands

Output

Live editor

Other Branches

Open

Ignored or Blocked

Detected dependencies

Recommend Projects

Recommend Topics

Recommend Org