import { pintora, PINTORA } from '@hikerpig/pintora'
pintora`
mindmap
@param layoutDirection TB
* Pintora diagrams
** UML Diagrams
*** Sequence Diagram
*** Activity Diagram
*** Component Diagram
** Non-UML Diagrams
*** Entity Relationship Diagram
*** Mind Map
`
pintora`
sequenceDiagram
autonumber
User->>Pintora: render this
activate Pintora
loop Check input
Pintora-->>Pintora: Has input changed?
end
Pintora-->>User: your figure here
deactivate Pintora
@note over User,Pintora: note over
@note right of User: note aside actor
@note right of User
multiline note
is possible
@end_note
== Divider ==
`
pintora`
erDiagram
CUSTOMER {
int id PK
int address FK
}
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
ORDER {
int orderNumber PK
int customer FK
string deliveryAddress
}
`
pintora`
componentDiagram
package "@pintora/core" {
() GraphicsIR
() IRenderer
() IDiagram
[Diagram Registry] as registry
}
package "@pintora/diagrams" {
[...Multiple Diagrams...] as diagrams
[diagrams]
[diagrams] --> IDiagram : implements
}
package "@pintora/renderer" {
() "render()" as renderFn
[SVGRender]
[CanvasRender]
[SVGRender] --> IRenderer : implements
[CanvasRender] --> IRenderer : implements
IRenderer ..> GraphicsIR : accepts
}
package "@pintora/standalone" {
[standalone]
}
[IDiagram] --> GraphicsIR : generate
[standalone] --> registry : register all of @pintora/diagrams
[@pintora/standalone] --> [@pintora/diagrams] : import
[standalone] --> renderFn : call with GraphicsIR
`
pintora`
activityDiagram
start
partition Init {
:read config;
:init internal services;
note left: init themes
}
:Diagram requested;
if (diagram registered ?) then
:get implementation;
else (no)
:print error;
endif
switch ( renderer type )
case ( svg )
:Generate svg;
case ( canvas )
:Draw canvas;
case ( custom )
:Custom renderer output;
endswitch
while (data available?) is (available)
:read data;
:generate diagrams;
endwhile (no)
end
`
pintora`
sequenceDiagram
@param messageFontSize 20
@config({
"themeConfig": {
"theme": "larkDark"
}
})
autonumber
User->>Pintora: render this
`
PINTORA.default.setConfig({
themeConfig: {
theme: 'default', // available themes, default/dark/larkDark/larkLight
}
})
pintora`
mindmap
@param layoutDirection TB
* Pintora diagrams
** UML Diagrams
*** Sequence Diagram
*** Activity Diagram
*** Component Diagram
** Non-UML Diagrams
*** Entity Relationship Diagram
*** Mind Map
*** Gantt Diagram
${{
themeConfig: {
theme: 'dark'
}
}}
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
