Arrow icon
See all demos

UML Class Shape Inspector

How to use the built-in standard.Record shape to create a UML class? How to configure the Inspector plugin to be split into tabs and be able to change attributes and methods of a UML class at a granular level (visibility, name, parameters, return types)? Check out this demo.
Demo instructions
Learn how to create UML class using standard.Record shape & configure Inspector plugin for split tabs and more.
UML class shape inspector

See the Pen JointJS+: UML class shape inspector by JointJS (@jointjs) on CodePen.

View on full screen

For a better experience, expand this demo to full screen.

Made with JointJS+

Only available with the JointJS+ commercial license in the apps/ directory of your package. Don't have a license yet? Start a trial and use the source code of all our demos for free, with no strings attached, for 30 days.

Learn about Jointjs+
Start free trial

Made with JointJS

Available in the JointJS open-source library which helps developers create simple visual applications in less time.

Download JointJS
Github logo
View code on github

Features showcase

JavaScript

Property editor & viewer

Custom shapes

Built-in shapes

Content-driven shapes

More demos
See all demos
jointjs_core
Chatbot

Chatbot

Use this demo application to create an advanced Chatbot solution with an intuitive drag-and-drop editor.
jointjs_core
Kitchen Sink App

Kitchen Sink App

This demo presents all the main features of JointJS+ and is a useful guide to understand its capabilities.
jointjs_core
BPMN

BPMN

The BPMN demo demonstrates a standardized approach to modeling the steps of a business process from start to finish.
jointjs_core
MindMap

MindMap

This demo shows a diagram used to visually organize information into a hierarchy.
jointjs_core
Organizational Chart

Organizational Chart

This demo showcases the power of JointJS+ on one of the most widely used diagram types.
jointjs_core
Flowchart

Flowchart

This flowchart created using our JavaScript/Typescript diagramming library shows a simple checkout process.
jointjs_core
Decision Tree

Decision Tree

An AI-driven experiment based on reinforcement learning can be visualized as a decision tree. Check out such an example.
jointjs_core
ChatGPT MindMap

JointJS+ ChatGPT MindMap

Enter any text and create an interactive mind map using the ChatGPT API and JointJS+ capabilities.

Speed up your development with a powerful library

Leverage a time-tested JavaScript diagramming library using the best of HTML5 and SVG to accelerate your development.
start Free trial
buy jointjs+
JavaScript diagramming library powering exceptional UIs.
The latest news
DISCOVER
FeaturesDemos & examplesCustomer storiesJointJS+About usFAQContact us
DEVELOP
DocumentationSupportCommunityCustom developmentResellersCustomer portal
USEFUL
NewsPricingLicensingSupport termsTry JointJS+ for freeBuy JointJS+JointJS+ comparison
discover
Icon
develop
Icon
useful
Icon
client.IO
We are part of client.IO, a company dedicated to developing Low-Code/No-Code tools and empowering innovative thinkers to create amazing products faster. Learn more
Appmixer
We are proud creators of Appmixer, an embedded iPaaS and workflow automation system. Powered by JointJS+. Learn more
Cookie PolicyPrivacy Policy
This website is haunted