JointJS

JavaScript diagramming library powering exceptional UIs

[JointJS @jointjs]

We’re excited to launch the JointJS MCP Server, a completely free tool that connects your AI coding assistants (Claude, Cursor, Copilot, and more) directly to up-to-date JointJS docs, APIs, and demo code.

Instead of guessing or relying on outdated training data, your AI agent can now:
• Use the correct JointJS APIs
• Follow official best practices
• Generate higher quality code

Learn more about JointJS MCP Server: https://t.co/YYIqWNq7ZD

If you’re building with JointJS, adding MCP to your AI tooling is a no-brainer.

[JointJS @jointjs]

We (and by we I mean @DavidDurman) built a small JointJS app that lets you track tournament results. It's handy for sports events where you or your kids participate, and you can even use it to play guessing games for tournaments you watch. (The upcoming FIFA World Cup is a nice example here.) ⚽️🏀🏒

I peeked at the code and singled out some coding patterns I thought might be interesting for you to 'steal' and use in your JointJS apps.

📝 The article: https://t.co/slU7MK45VT
🏆 Tournament Studio JointJS app: https://t.co/hutGgXkPQA

[JointJS @jointjs]

@NorthSecureAI Exactly! In a product that's actively developed and maintained (like JointJS), access to live docs is much more valuable than the model's training set data. 🙂

[JointJS @jointjs]

We’re excited to launch the JointJS MCP Server, a completely free tool that connects your AI coding assistants (Claude, Cursor, Copilot, and more) directly to up-to-date JointJS docs, APIs, and demo code.

Instead of guessing or relying on outdated training data, your AI agent can now:
• Use the correct JointJS APIs
• Follow official best practices
• Generate higher quality code

Learn more about JointJS MCP Server: https://t.co/YYIqWNq7ZD

If you’re building with JointJS, adding MCP to your AI tooling is a no-brainer.

[JointJS @jointjs]

You'll also find a short write-up on our blog: https://t.co/3l84rV951U

[JointJS @jointjs]

Are you sharing your MCP server configuration and setup with your team? 🤔

It's really easy in Claude Code. Just add a flag `--scope project` while installing an MCP, and a file `.mcp.json` will be created. You can commit that to your repository, and whenever a team member enters Claude Code, the config will be read, and servers will be connected (after granting permission). 🔥

#claudecode #mcp

[JointJS @jointjs]

Can your diagramming library handle 100,000 elements and still feel this smooth and performant? 💨

We put JointJS to the test to see whether it could turn a massive diagram into a performance masterpiece.

See it in action below. 👇

#WebPerformance #JointJS #TechTips

[JointJS @jointjs]

Wonder how JointJS performs with massive diagrams and workflows?

Here's a written overview on our blog, testing diagrams with 100,000 nodes. 🚀

https://t.co/31dwNkhPDb

[JointJS @jointjs]

JointJS performance overview: https://t.co/xyCa9rn5hu

[JointJS @jointjs]

Can a JavaScript diagramming library render 100,000 elements on a single canvas without dropping frames?

Short answer: Yes.

Long answer: We tested it. From 600 nodes to 100,000, with and without performance optimizations applied, recording everything in the DevTools Performance tab.

The video covers:
🚀 How JointJS holds up at 600, 1,000, 6,000, 11,000, and 100,000 nodes
⚡️ The five techniques that make the biggest difference at scale
🤖 How to get specific, doc-backed performance advice with the JointJS MCP server

If you're evaluating diagramming libraries and care about performance, this one's worth a watch.

Link in the comments.

#JointJS #DataVisualization #Diagramming

[JointJS @jointjs]

Try the YouTube Channel Visualizer: https://t.co/xj8Nv4EnJx

[JointJS @jointjs]

Want a clearer view of your YouTube channel performance?

With our YouTube Channel Visualizer, you can:
🚀 map your channel as an interactive diagram
📊 spot key metrics that help you make better content decisions
🎆 export a visual snapshot to share with your team or audience

Watch the short video to see how it works.

#YouTube #ContentStrategy #DataVisualization #CreatorTools #Analytics

[JointJS @jointjs]

What if your Claude Code Playground diagrams were actually interactive?

Draggable nodes. Smart link routing. Animated transitions.

One HTML file, no build steps.

Here's how to do it with the open source version of JointJS 👉 https://t.co/YthUrG9D8E

#claudecode #diagramming #javascript #webdev

[JointJS @jointjs]

🎬 From JointJS demo to working apps — in minutes, with Claude Code

1/ Pick a JointJS demo app close to your use case.
2/ Tell Claude Code what to change.
3/ Have a working prototype before your next meeting.

In our latest tutorial, Zoran walks through customizing our AI workflow builder demo — branding, UI tweaks, new workflow actions, SVG export — without deep JointJS knowledge.

We have 180+ demos to start from. The rest is just prompting.

Watch the full tutorial: https://t.co/rnVTsBEVoq

#JointJS #ClaudeCode #Diagramming #AI

[JointJS @jointjs]

Do long links make your complex diagrams hard to read? 😵‍💫

As diagrams grow, connections start crossing the entire canvas, overlapping elements and adding visual noise.

✅ In our new demo, we solve this with link teleports.

Long links are replaced with small markers at each end. Click a marker and the viewport jumps to the connected shape. Short links stay visible. Long ones switch automatically.

Cleaner canvas. Same connectivity.

Play with teleport links here: https://t.co/Rz3cwhGXPO

#JointJS #diagramming

[JointJS @jointjs]

itemis DE uses JointJS to power a visual statechart editor in itemis CREATE, enabling teams to model, simulate, and validate complex state-based system behavior.

➡️ https://t.co/4jRHhxcYw1

--
See more real-world products built with JointJS 👉 https://t.co/8u5t3HDdva

#CustomerShowcase #itemis #JointJS #Diagramming #StatechartEditor #StateMachine

[JointJS @jointjs]

Big news for JointJS 🚀

We’re excited to welcome @ZoranJambor as our new Developer Advocate.

Many of you may already know Zoran as the person behind @CSSWeekly — a developer newsletter with 40,000+ subscribers — and a YouTube channel followed by 13k+ developers. For years, he’s been curating, explaining, and breaking down complex frontend topics for a global audience.

Now, he’s bringing that experience to JointJS.

Zoran will help us double down on:
😎 clearer technical content
👌 better demo apps
📄 deeper tutorials
❤️ stronger connection with the dev community

JointJS has always been built for developers solving complex diagramming problems. With Zoran onboard, we’re investing even more into education, hands-on examples, and real-world use cases.

If you're building workflow editors, BPMN modelers, data modeling tools, network visualizations, or any serious diagram UI — you’ll be seeing a lot more practical content from us soon.

Welcome to the team, Zoran 👋

[JointJS @jointjs]

Curious how it’s built? Read the full tutorial:
https://t.co/C2XND5XBBf

[JointJS @jointjs]

👫 We’ve just released a new Genogram (family tree) demo.

Turn structured family data into a clean, interactive, multi-generational diagram — automatically.

No manual positioning.
No layout headaches.

If your app works with relationship or hierarchical data, this shows how to visualize it clearly and instantly.

👉 Explore the live demo: https://t.co/8an7b5qeOW

Full tutorial linked below.

#genogram #familytree #diagramming #jointjs

[JointJS @jointjs]

Have you ever wondered how to render Angular components inside JointJS shapes?

Our latest tutorial shows how to do this with Angular’s native createComponent() API — no migration or workarounds required.

What you get:

✅ Reuse existing components
✅ Stay in the Angular ecosystem
✅ Full two-way binding
✅ Complete lifecycle management

Perfect for teams that:

1️⃣ Have existing Angular components they need to visualize in diagrams
2️⃣ Want to build diagramming features without stepping outside Angular's patterns
3️⃣ Need interactive diagram elements with forms, inputs, or complex UI

🔗 Get started: Follow the complete step-by-step tutorial: https://t.co/N4mZdw57hy

[JointJS @jointjs]

👉 Our new GitHub repository with all demo apps: https://t.co/249630lYDM

[JointJS @jointjs]

The source code of aaaaaall our 180+ demo apps is now on GitHub! 🚀

Plus, we’ve updated the demo pages to improve how you browse, test, and reuse them.

Now you can:

1️⃣ Pick the demo closest to your use case
2️⃣ Explore it in full-screen mode
3️⃣ Jump straight to the source code
4️⃣ Install it locally via NPM
5️⃣ Adapt it to your own product

Pair this with tools like Claude Code, and you can go from idea → prototype → production in record time.

What a time to be a diagrammer! 😎