# Diagram Library for JavaScript and TypeScript

A diagram library that enables you to build any type of graph, flowchart, tree, org chart, diagram, process chart, database schema and much more. Includes a huge variety of prdefined node and link shapes, automatic layout algorithms, many import and export options.

## Installing

For the latest stable version:

```
npm install @mindfusion/diagramming
```

![MindFusion Diagramming Library for JavaScript](https://mindfusion.dev/product_images/javascript/library/diagram/bpmn_diagram.png)
	
	
### New in version 4.9

#### CSS Styling
The styling system now supports defining item appearance through [external CSS](https://mindfusion.dev/docs/javascript/diagramming/CSS_Styling_0.htm) files. You can style different item types using custom element selectors such as **mfd-shapenode**, **mfd-diagramlink**, or **mfd-tablenode**. The system maps CSS Custom Properties to the internal [Style](https://mindfusion.dev/docs/javascript/diagramming/CC_T_MindFusion_Diagramming_Style_0.htm) properties. For example, use **--brush** for backgrounds, **--stroke** for outlines, and **--font-size** for text. The new [cssClass](https://mindfusion.dev/docs/javascript/diagramming/P_MindFusion_Diagramming_DiagramItem_cssClass_0.htm) property on [DiagramItem](https://mindfusion.dev/docs/javascript/diagramming/CC_T_MindFusion_Diagramming_DiagramItem_0.htm) allows for more granular styling using standard class selectors in your CSS. To ensure high performance, computed styles are cached globally, and the system automatically resolves style inheritance across class hierarchies (e.g., a [ShapeNode](https://mindfusion.dev/docs/javascript/diagramming/CC_T_MindFusion_Diagramming_ShapeNode_0.htm) will resolve styles from **mfd-shapenode**, **mfd-diagramnode**, and **mfd-diagramitem** selectors in that order).

```css
/* Style all shape nodes */
mfd-shapenode {
    --brush: #f9f9f9;
    --stroke: #333;
    --stroke-thickness: 1px;
    --font-name: 'Verdana';
}

/* Specific styling via the new cssClass property */
mfd-shapenode.urgent {
    --brush: #ffcccc;
    --stroke: #ff0000;
    --stroke-thickness: 2px;
}

/* Style table captions using custom properties */
mfd-tablenode {
    --caption-brush: #e0e0e0;
    --text-color: #000066;
} 
```


#### Compact Multi-graph Layout
A new [MinimalArea](https://mindfusion.dev/docs/javascript/diagramming/T_MindFusion_Graphs_MultipleGraphsPlacement.htm) option has been added to the **MultipleGraphsPlacement** enumeration, which uses a bin-packing algorithm to arrange connected components in a compact, square-like area. This ensures a more efficient use of space compared to horizontal or vertical arrangements when laying out multiple independent graphs.

#### Polygonal Text Layout
The [ShapeNode](https://mindfusion.dev/docs/javascript/diagramming/CC_T_MindFusion_Diagramming_ShapeNode_0.htm) class now supports a [polygonalTextLayout](https://mindfusion.dev/docs/javascript/diagramming/P_MindFusion_Diagramming_ShapeNode_polygonalTextLayout_0_0.htm) property, enabling text to wrap and align precisely within the geometric boundaries of non-rectangular shapes like triangles, diamonds, and custom polygons. This feature supports both plain and styled text across all alignment modes.


## React support

The DiagramView React component allows integrating the MindFusion.Diagramming API into React applications. It renders a [Diagram](https://mindfusion.dev/docs/javascript/diagramming/CC_T_MindFusion_Diagramming_Diagram_0.htm) instance assigned to "diagram" prop as its model. Most diagram properties can be set from JSX, and all diagram events can be handled through JSX syntax as well. For more information, see the [Integration with React](https://mindfusion.dev/docs/javascript/diagramming/React.htm) topic. 

[The DiagramView component for Rect on npm.](https://www.npmjs.com/package/diagram-library-react)

## Vue.js support

The diagram-view Vue.js component allows integrating the MindFusion.Diagramming API into Vue.js applications. It renders a [Diagram](https://mindfusion.dev/docs/javascript/diagramming/CC_T_MindFusion_Diagramming_Diagram_0.htm) instance assigned to "diagram" prop as its model. Most diagram properties can be set from the vue template, and all diagram events can be handled through the v-on directive as well. For more information, see the [Integration with Vue.js topic.](https://mindfusion.dev/docs/javascript/diagramming/Vue_js.htm)

[The DiagramView component for Vue on npm.](https://www.npmjs.com/package/diagram-library-vue)

## Angular support

The diagram-view Angular component allows integrating the MindFusion.Diagramming API into Angular applications. It renders a [Diagram](https://mindfusion.dev/docs/javascript/diagramming/CC_T_MindFusion_Diagramming_Diagram_0.htm) instance assigned to "diagram" property as its model. Most diagram properties can be set from the html template, and all diagram events can be handled through event binding syntax as well. For more information, see the [Integration with Angular topic.](https://mindfusion.dev/docs/javascript/diagramming/Angular.htm)

[The DiagramView component for Angular on npm.](https://www.npmjs.com/package/diagram-library-angular)

The diagram library is also included in [MindFusion Pack for JavaScript.](https://mindfusion.dev/javascript-pack.html)

## Documentation

1. [Detailed API Reference](https://mindfusion.dev/docs/javascript/diagramming/CC_Introduction_20.htm)
2. [Tutorials and Step-by-step Guides](https://mindfusion.dev/docs/javascript/diagramming/CC_Tutorial_1__Loading_Graph_Data_1.htm)

## Online ShapeDesigner Tool
[https://mindfusion.dev/tools/shape-designer.html](https://mindfusion.dev/tools/shape-designer.html)

## Samples

A variety of online samples are uploaded at the [MindFusion Js Diagram website.](https://mindfusion.dev/products/javascript/diagramming/samples) You can also visit the [online demo for Js Diagram.](https://mindfusion.dev/javascript-demo.html?sample=bpmndiagram) You can download an archive with all samples and all files for the library [from here.](http://mindfusion.dev/JsDiagramTrial.zip)


## Additional Information

Learn more about JS Diagram [from the official product page.](https://mindfusion.dev/javascript-diagram.html) Stay in touch with MindFusion about our latest product announcements, tutorials and programming guidelines via  [X](https://x.com/MindFusion_News) or [our company blog.](https://mindfusion.dev/blog/)



## Technical Support

* [Forum](https://mindfusion.dev/Forum/YaBB.pl?board=jsdiag_disc)
* [E-mail](mailto:support@mindfusion.eu)
* [Help desk](https://www.mindfusion.dev/HelpDesk/index.php)

## Licensing

The end-user license agreement for JS Diagram is [here.](https://mindfusion.dev/eula.html)