Skip to main content

Shapes

Shapes in a Diagram are provided by one or more Shape Sets. A shape set is a collection of named SVG shapes that the Diagram can use to render its nodes and groups.

Configuration​

You configure the shapes for a Diagram using the shapes option to a diagram. This option accepts either a single ShapeSet or an array of ShapeSet objects.

import { FLOWCHART_SHAPES, BASIC_SHAPES } from "@visuallyjs/browser-ui"
import { DiagramComponent } from "@visuallyjs/browser-ui-react"
import "@visuallyjs/browser-ui/css/visuallyjs.css";

export default function App() {
    
  const data = ...
    
  const options = {
  shapes: [ FLOWCHART_SHAPES, BASIC_SHAPES ]
}
    
  return <div style={{width:"100%", height:"500px"}}>
    <DiagramComponent data={data} options={options}/>
  </div>    
}

Available shape sets​

VisuallyJs ships with two shape sets in the browser-ui package and a set of BPMN shapes:

Flowchart​

import { FLOWCHART_SHAPES } from "@visuallyjs/browser-ui"
processdecisionterminusinputdocumentmanualInputmanualOperationpreparationconnectormergecollatesubroutineorloopLimitdelaydisplaydatabasedataStorage

Basic​

import { BASIC_SHAPES } from "@visuallyjs/browser-ui"
rectanglerounded-rectangleellipsediamondisosceles-triangleinverted-isosceles-triangleright-trianglelabelinverted-right-trianglehexagonhexagon-flatoctagonpentagonparallelogramtrapezoidcrossl-shape-bll-shape-brl-shape-tll-shape-tru-shapeinverted-u-shape

BPMN​

import { BPMN2_SHAPES } from "@visuallyjs/bpmn"
start-eventend-eventintermediate-eventgatewaytasktransactioncall-activitysubprocessgroupdataObjectdataStoreReferencepoollane
info

These shapes are shipped in the @visuallyjs/bpmn library - you'll need to import it.

Custom shape sets​

It's straightforward to make your own shape set - they consist of an id and then a list of shapes, for each of which you provide SVG.

Here we have made a set of faces:

const shapes = {
    id:"faces",
    shapes:[
        {
            type:"impassive",
            template:`<g>
<circle cx="{{width/2}}" cy="{{height/2}}" r="{{(width/2)}}"/>
    <path d="M {{width/4}} {{height*3/4}} L {{width*3/4}} {{height*3/4}}"/>
    <circle cx="{{width/4}}" cy="{{height/4}}" r="10"/>
    <circle cx="{{width*3/4}}" cy="{{height/4}}" r="10"/>
    <circle cx="{{width/2}}" cy="{{height/2}}" r="10"/>
    </g>`,
        label:"Impassive"
    },
    {
        type:"pleased",
        template:`<g>
            <circle cx="{{width/2}}" cy="{{height/2}}" r="{{(width/2)}}"/>            
            <circle cx="{{width/4}}" cy="{{height/4}}" r="10"/>
            <circle cx="{{width*3/4}}" cy="{{height/4}}" r="10"/>
            <circle cx="{{width/2}}" cy="{{height/2}}" r="10"/>
            <path d="M {{width/4}} {{height*3/4}} C {{width/4}} {{height*7/8}}, {{width*3/4}} {{height*7/8}} {{width*3/4}} {{height*3/4}}"/>
            </g>`,
        label:"Pleased"
    },
    {
        type:"notpleased",
        template:`<g>
              <circle cx="{{width/2}}" cy="{{height/2}}" r="{{(width/2)}}"/>            
              <circle cx="{{width/4}}" cy="{{height/4}}" r="10"/>
              <circle cx="{{width*3/4}}" cy="{{height/4}}" r="10"/>
              <circle cx="{{width/2}}" cy="{{height/2}}" r="10"/>
              <path d="M {{width/4}} {{height*3/4}} C {{width/4}} {{height*5/8}}, {{width*3/4}} {{height*5/8}} {{width * 0.75}} {{height * 0.75}}"/>
              </g>`,
        label:"Not Pleased"
    }
    ]
}