DEV Community: Thomas Bouffard

Looking Ahead: maxGraph in 2025

Thomas Bouffard — Wed, 02 Apr 2025 22:02:19 +0000

maxGraph is a TypeScript library which can display and allow interaction with vector diagrams.

2024 has been an exciting year for maxGraph! Strides have been made in improving the library, focusing on documentation, tree-shaking, and bug fixes, setting the stage for future enhancements. As 2025 approaches, here is a vision for the year ahead along with a recap of key milestones. 🚀✨

Let's dive into what's been accomplished and what to expect next! 🎯

Documentation and Examples: Making maxGraph Easier to Use

The first major focus in 2024 has been on improving the documentation. With the release of v0.15.0, a significant milestone was achieved: the entire mxGraph manuals and tutorials have been integrated and adapted for maxGraph! 📚

This integration ensures comprehensive, structured documentation that benefits from the maturity and experience of mxGraph. Additionally, more examples and demos have been added based on community feedback, making it easier to find relevant code snippets directly from most pages. 💡

What’s Next?

The documentation journey will continue in 2025, focusing on the following areas:

Better organization of manuals and tutorials.
Creating a clear learning path for newcomers.
Ensuring consistency with existing usage documentation.

This is a large topic that will be gradually implemented throughout 2025.

☞ Interested in contributing to the documentation? Join the discussion about the documentation roadmap here: #595

Tree-Shaking: Shrinking the Library Size

While documentation improvements have enhanced usability, optimizing tree-shaking has been equally important.

maxGraph, as a fork of mxGraph, inherited some limitations—one being inefficient tree-shaking. Regardless of which parts of mxGraph were used, it contributed about 811KB (minified) to application sizes.

From the start, one of maxGraph’s goals has been to provide better tree-shaking support. Here’s how improvements have been made so far:

In the initial release, Internet Explorer support was removed, and custom code was replaced with modern ECMAScript APIs. This reduced the size of the library and prepared the ground for new improvements. 🔧

Subsequent notable releases brought further tree-shaking improvements, reducing the size of applications that don't use related features:

Release v0.6.0: Codecs are no longer registered by default.
In v0.11.0: MaxLog and MaxWindow are no longer called directly, avoiding transitive inclusion.
With v0.12.0: The npm package is declared without side effects.

What’s Next?

Despite these efforts, the contribution of maxGraph to application sizes remains significant (around 450 kB at minimum). Finding ways to reduce this footprint even further is a key goal. 📉

Ongoing discussions and opportunities are described in Issue #665: Strategies for Further Tree-Shaking Improvements, outlining potential enhancements for 2025.

To achieve more efficient tree-shaking, new methods of graph instantiation will be explored while maintaining the current mechanism for those who prefer the default setup, even if it results in a larger bundle size. This balance is necessary to ensure the library remains accessible for newcomers. ✨

While there may be breaking changes, efforts will be made to minimize their impact. These changes will primarily target extension points rather than core functionalities, which will be preserved. The approach will be progressive and incremental across releases—no big bangs here!

Wrapping Up

These plans are not set in stone but reflect goals and aspirations for 2025. Exciting developments lie ahead, and the journey continues with the support of the community. 🌟✨

👋 See you next year to review the progress made together! 🎉🚀

P.S. We're looking for contributors and maintainers to keep the project alive and kicking. Check out Issue #354 if you’re interested! 😄

Process Analytics Monthly Report - April 2023

Thomas Bouffard — Tue, 09 May 2023 05:13:00 +0000

Process Analytics - April 2023 News

Welcome to the Process Analytics monthly news 👋.

Our “always” reminder: The goal of the Process Analytics project is to provide a means to rapidly display meaningful Process Analytics components in your web pages using BPMN 2.0 notation and Open Source libraries.

In this edition, you'll find the details of the new bpmnVisualizationR package release and a refresh of the bpmn-visualization demo integrating with pm4py. 🤗 We're always looking for ways to improve your workflow, so read on for more details on these exciting developments!

bpmnVisualizationR package

In April, we released a new version: 0.4.0. This new version allows you to choose the style and position of the overlays.

In earlier versions, the style and the position of the overlays were not configurable.

Display overlays with default position and style

Now, it is possible to change the position and the style of the overlays, like in the following screenshot 👇:

Display overlays with a position and style change

Improvements in the bpmn-visualization pmp4py demo

Before pm4py 2.6.1, it was not possible to obtain statistics about the edges of the Petri net corresponding to the sequence flows of the BPMN diagram. This is a recurrent problem in the Process Mining community and a correction has been made in pm4py 2.6.1: pm4py/pm4py-core@84e85c6.

The demo has been updated to benefit from the fix and it is now able to display execution frequency on the sequence flows of the BPMN diagram 🥳.

Display execution frequency on sequence flows

That’s All Folks!

We hope you enjoyed this “edgy” April project news and are looking forward to what the rest of the spring will bring 👋.

In the meantime, stay on top of the latest news and releases by following us:

Website: https://process-analytics.dev
Twitter: @ProcessAnalyti1
GitHub: https://github.com/process-analytics
Discord: Join our server!
YouTube: Process Analytics YouTube channel

Cover photo by James Wheeler on Unsplash

Process Analytics - March 2023 News

Thomas Bouffard — Thu, 06 Apr 2023 09:09:00 +0000

Welcome to the Process Analytics monthly news 👋.

Greetings, fellow process enthusiasts 👋 As we welcome the first signs of spring, the Process Analytics team has been hard at work, bringing you some exciting updates for March. We recently took the stage at the Bonita Day Paris event, where we showcased our project to an enthusiastic audience. And that's not all! We've also been busy cooking up a new API that lets you style BPMN elements with just a few lines of code. We're always looking for ways to improve your workflow, so read on for more details on these exciting developments!

Highlights from our participation at Bonita Day

We recently had the pleasure of participating in Bonita Day Paris 2023, an event that brings together experts and enthusiasts in the field of business process management and automation. Not only did we get to showcase our latest project features and functionalities, but we also had the chance to network with other professionals in the industry and hear feedback from analysts and clients of Bonitasoft.

We introduced attendees to the exciting world of process mining, and explained our project, Process Analytics. To give attendees a deeper understanding of our project's capabilities, we demonstrated process monitoring in two scenarios: offline and online. Using bpmn-visualization, we showed how developers can use our libraries to create custom visualizations that fit their specific needs.

Overall, it was a great experience for us to connect with other experts in the field and demonstrate the unique benefits of the Process Analytics project.

Our demo at Bonita Day: a look inside

Our live demo at Bonita Day gave attendees a deep look into the capabilities of our project. We showed two process monitoring scenarios that demonstrated the various features of the bpmn-visualization TypeScript library, including applying CSS and overlays, registering interactions, and styling elements programmatically.

We demonstrated the interaction possibilities of the library that allows us to explore the different BPMN processes used in the demo and navigate to the sub-process, which was also part of the presentation.

In case monitoring, we demonstrated the ability to visualize the results of a mock recommendation system and take actions by interacting with the BPMN elements.

Our process monitoring scenario also showed the happy path animated on the BPMN process diagram.

For more details, check out the demo on GitHub.

The Process Analytics Project website

In February, we gave our website a fresh new look, and in March we focused on reworking the menu and improving the design for mobile users (see figure below). We're happy to announce that we have more improvements in the pipeline, so stay tuned for further updates in the coming months!

bpmn-visualization TypeScript library

In March, we released 2 versions: 0.32.0 & 0.33.0. The former includes several improvements, while the latter introduces the new update style API for programmatically styling BPMN elements.

Update style programmatically

Release 0.33.0 includes a new functionality that allows you to easily and programmatically style BPMN elements. Let's take a sneak peek at how to use this new feature with an example.

Let's say you want to monitor the progress of the execution of a BPMN process dynamically and progressively, like in the "Supplier Contact" process shown in our case-monitoring demo at Bonita Day.

With the update style API, you can achieve this easily by defining three states for the style - the activity currently under execution, the element that has just finished execution, and the elements that are already executed. To configure the style of the activity currently under execution, you can use the updateStyle method with the following parameters:

bpmnVisualization.bpmnElementsRegistry.updateStyle(activityId,
   {
      fill: {color: 'blue', opacity: 10},
      font: {opacity: 'default'},
      opacity: 'default',
      stroke: {color: 'blue', width: 3},
   });

For the element that has just finished execution, you can reduce its opacity using the updateStyle method like this:

bpmnVisualization.bpmnElementsRegistry.updateStyle(
  lastExecutedId, {opacity: 50});

Finally, for the elements that are already executed, you can further reduce their font and fill opacities using the updateStyle method with the following parameters:

bpmnVisualization.bpmnElementsRegistry.updateStyle(
  pastExecutedId,
  {
    font: {
      opacity: 15,
    },
    opacity: 20,
  });

In the coming weeks, we will provide several examples demonstrating the usage of this API in various use cases, and we also have plans for several improvements to be made on this API.

That’s All Folks!

That’s everything we were up to in March and we hope you found something in there to like. Stay tuned for more cool stuff coming up this spring 👋.

In the meantime, stay on top of the latest news and releases by following us:

Website: https://process-analytics.dev
Twitter: @ProcessAnalyti1
GitHub: https://github.com/process-analytics
Discord: Join our server!
YouTube: Process Analytics YouTube channel

Cover photo "Spring ball" by Hannah Jacobson on Unsplash

Bonita online documentation needs some Hacktoberfest 2022 love!

Thomas Bouffard — Wed, 05 Oct 2022 08:01:14 +0000

What?

Bonitasoft is taking part in Hacktoberfest, a month-long celebration of open source software, where developers are encouraged to - and rewarded for - contributing to open source projects like Bonita.

In this friendly, worldwide event, maintainers are invited to guide would-be contributors towards issues that will help move their projects forward, and contributors get the opportunity to give back - to projects they like, and to others they've just discovered.

This year, we propose work on the design of the online Bonita documentation web site 🔥.

For example, there is an opportunity to improve the light and dark themes 🎨, improve the look and feel for mobile, and much more 😍.

Who?

This project is open to everyone and no contribution is too small — bug fixes and documentation updates are valid ways of participating ✨.

How?

It's easy! Register on Hacktoberfest with your GitHub account, search for issues to contribute, and send at least 4 pull requests ... After the 4th validated PR, you win the Hacktoberfest 2022 👕 or a 🌲 is planted in your name (first 40,000 participants, so get in there early!).

To contribute to the design (a.k.a bonita-documentation-theme) of the Bonita documentation site:

Check the opened issues available for Hacktoberfest.
Find one that you are interested in and which is not already assigned to someone.
Post a comment to mention you are willing to work on this topic. We will acknowledge and will assign it to you to inform the world!
Work on a Pull Request. Ask any question if you are blocked or you need more details to complete your task.
Submit your Pull Request. We will review it quickly and will work with you to ensure it is merged and visible on the documentation site

We are looking forward to your contributions 👋!

Process Analytics - August 2022 News

Thomas Bouffard — Mon, 12 Sep 2022 14:12:27 +0000

Welcome to the Process Analytics monthly news 👋.

Our monthly reminder: The goal of the Process Analytics project is to rapidly display meaningful Process Analytics components in your web pages using BPMN 2.0 notation and Open Source libraries.

Summer continues 🌞. On our side, the project team worked very hard in July and August to improve the project website, the BPMN Visualization (JavaScript/TypeScript) library and R package 🤗. Let’s see what’s new here 👀!

Project presentation series

In July, we concluded a first series of presentations and webinars about the project. If you missed them, you can still see them all here 🤗

Website: start of the new design

At the end of August, we restructured the footer of the website to provide better navigation between pages. This is the first step of the redesign of the site. Stay tuned for more changes 👀

As a reminder, the former footer looked like this:

bpmn-visualization R Package

We released a new version of the package that includes documentation improvement and which uses the latest version of the bpmn-visualization JS/TS library. 🤔 For more details, see the release notes of the 0.2.0 version.

For the next few months, we will work to make the package available on CRAN 🛰️. This will simplify access to the package for people that cannot or don’t want to install it from GitHub.

bpmn-visualization JS/TS library

In July and August, we released 4 versions of the library. Most of them are maintenance and internal improvements (mainly about tests).

Version 0.26.0 brings improvements to customize the style of the Text Annotation elements and to the demo layout.

More styling capabilities for Text Annotation elements

In previous versions, it was already possible to customize the style of the Text Annotation elements and to configure a fill color (a gradient of colors could also be used). But only a small area of the Text Annotation was filled (the area delimited by the open rectangle).

In version 0.26.0, the whole Text Annotation area is now filled as shown in the following figure 👇. Looks nicer, no?

The Bonita procurement example showing Text Annotation filled with a custom color

Demo improvements

A new Light Blue BPMN theme

A new Light Blue BPMN theme is available. It uses the new, improved fill color of the Text Annotation elements.

The new “Light Blue” BPMN theme features Text Annotation elements displayed with a specific fill color

More space for diagram rendering

The Diagram title section has been removed, so there is now more space for the BPMN diagram rendering, especially on mobile.

You can see the evolution between version 0.25.2 and version 0.26.0 (shown as 0.25.3-post version here) 👇.

That’s All Folks!

We hope you enjoyed this August project news and are looking forward to what the end of the summer will bring 👋.

In the meantime, stay on top of the latest news and releases by following us:

Website: https://process-analytics.dev
Twitter: @ProcessAnalyti1
GitHub: https://github.com/process-analytics

Cover photo by Nattu Adnan on Unsplash

Process Analytics - May 2022 News

Thomas Bouffard — Tue, 07 Jun 2022 11:44:17 +0000

Welcome to the Process Analytics monthly news 👋.

As you know, the goal of the Process Analytics project is to rapidly display meaningful Process Analytics components in your web pages using BPMN 2.0 notation and Open Source libraries.

Spring continues🦄. Perhaps, it was generous with Easter eggs 🥚this year? For sure, the sun is here 🌞 (North hemisphere) or the wind blows 💨 (South hemisphere).

On our side, the project team worked very hard in May to propose new elements in our Process Analytics project. These include:

website updates
bpmn-visualization (JavaScript/TypeScript) library improvements

Website updates: Announcing the “Model Generation Application”

In December news, we presented the BPMN Layout Generator component.

In May, we introduced the 📣 “Model Generation Application”, an upcoming demonstration tool, built with Process Analytics components that generates process diagrams from event logs 👀.

⏩ Visit the Model Generation Application page on the Process Analytics website to learn more.

Model Generation Application preview

bpmn-visualization JS/TS library

In May, we released 3 versions: 0.23.2, 0.23.3 & 0.24.0.

New Zoom API 📚

This Zoom API allows you to easily zoom in and out using zoom buttons.

Watch the following demo of bpmn-visualization to get a quick overview. 👇

Zoom in/out with zoom buttons

New TypeScript example in the browser 🎁

A new example is now available at CodeSandbox to play with the bpmn-visualization TypeScript API.

It adds to the already existing JavaScript examples hosted on CodeSandox and CodePen.

TypeScript example with CodeSandox

GitHub repository figures 😻

In May, the bpmn-visualization repository welcomed Pull Request #2000, which means that more than 2000 Issues and Pull Requests have been created since the beginning of the project.

We thank all our users and contributors 🤗 for this achievement.

That’s all folks!

We hope you enjoyed this May project news update and we are looking forward to what the summer will bring 👋.

In the meantime, stay on top of the latest news and releases by following us:

Website: https://process-analytics.dev
Twitter: @ProcessAnalyti1
GitHub: https://github.com/process-analytics

Cover photo by Vitolda Klein on Unsplash

Process Analytics - February 2022 News

Thomas Bouffard — Tue, 15 Mar 2022 16:29:44 +0000

Welcome to the Process Analytics monthly news 👋.

As we remind you each month, the goal of the Process Analytics project is to rapidly display meaningful Process Analytics components in your web pages using BPMN 2.0 notation and Open Source libraries.

In February, we worked on improving the BPMN Visualization (JavaScript/TypeScript) library 🤗. Let’s see what’s new here 👀!

BPMN Visualization JS/TS library

In February, we released 2 versions: 0.21.4 & 0.21.5. They were focused on improving the TypeScript support.

The 0.21.5 release includes a fix for issue #1808 that prevented some TypeScript projects from using bpmn-visualization 😭. This issue was introduced in version 0.21.3. It also impacted projects using the types to get the API documentation in IDE.

The team enthusiastically thanks @kristapsdz-saic for the detailed report and investigations 🏅.

Since the fix, we have added additional checks to the build process to make sure such an issue won't happen again 🤔.

We introduced a new TypeScript project built with Vite in the examples repository to spot similar errors. All TypeScript projects are now built continuously 🛠️, so we will detect issues earlier.

Some definition files previously referenced types or classes that were not available. This is fixed as well.

Finally, to improve the usage of bpmn-visualization in TypeScript projects, the README now provides more information about the TypeScript support and how to use the library 📚.

The API document in IDE is now working, as demonstrated in the following codesandbox example that uses bpmn-visualization 0.21.5 👇.

Usage of the types as documentation in an IDE

That’s All Folks!

We hope you enjoyed this February project news and are looking forward to what March will bring 👋.

In the meantime, to stay on top of the latest news and releases, follow us through:

Website: https://process-analytics.dev
Twitter: @ProcessAnalyti1
GitHub: https://github.com/process-analytics

Cover photo by le Sixième Rêve on Unsplash

Hacktoberfest 2021: Process Analytics makes its mark

Thomas Bouffard — Mon, 21 Feb 2022 08:40:44 +0000

Again this year, Process Analytics participated in Hacktoberfest 2021 and it was a great success. This post highlights some of the contributions the project received and we compare this year with the
results of Hacktoberfest 2020 👀.

We offered the community the opportunity to work on our cornerstone bpmn-visualization Typescript library, its related examples repository, the project website and the recently released R package.

As part of the event, we updated our famous Hacktoberfest BPMN Diagram
with the Hacktoberfest 2021 theme:

Process Analytics

@processanalyti1

📯 Want to promote your project and call on people to contribute during @hacktoberfest?
We have a small application for that 🤘. It shows a diagram explaining how to participate. You can easily adapt it so it contains your project name 🎉
More details dev.to/process-analyt…

06:22 AM - 04 Oct 2021

We also introduced a GitHub organization profile with a contribution cheat sheet. It received a special Hacktoberfest branding during the event.

Hacktoberfest 2021 results

To be honest, we did not expect to get many contributions:

There is a huge number of projects participating in Hacktoberfest, so it is very difficult to be noticed among the list. Hacktoberfest communicated that “over 90,000 projects [were] participating in Hacktoberfest across GitHub and GitLab this year“.
We are not playing in a trendy field, which would make our project much more attractive

But we consider ourselves lucky, as we received some from people from different locations and with a variety of profiles 🍀. Once again, we thank all our contributors.

Website

Nathalie Cotté gave us some feedback on the usability of the website. For sure, we will implement some of her recommendations in 2022 😊.

BPMN Visualization R Package

The first version of the R package (version 0.1.0) was released on 2 Sep 2021, shortly before Hacktoberfest. We were therefore interested to find out if it was going to attract attention for its first participation.

Adrien Lachambre offered the first 3 external contributions in the history of the package. They improved the documentation ✨ and the API 🤩 and were integrated in the 0.1.1 version.

We hope they help Adrien to get his Hacktoberfest 👕 or to plant a 🌳.

BPMN Visualization Examples

Kyle Johnston is a Web Designer and he made several improvements to the design of the examples.

He first improved the navigation between examples to cover several known issues. Navigation is now easier because it no longer uses tabs 🍾. On the home page, a click on a card goes directly to the example. And to return from an example to the home page, just click on the project logo.

Bonus: Kyle improved the responsive layout and fixed some annoying glitches 😻.

🤔 We were curious to know how a designer came up with the idea to contribute to our project and here is Kyle's quote:

“Thank you for the update and the opportunity to contribute! I do not work in [your] field; I searched for repos with design / frontend issues tagged with hacktoberfest.”

Perfect! We were very pleased to receive contributions from new perspectives, thanks again!

Comparison with Hacktoberfest 2020

Last year we also participated in Hacktoberfest 2020. We received a larger number of contributions than in 2021, but only for the bpmn-visualization Typescript library. They were all about BPMN Support and new BPMN Rendering features:

Render all Conditional Events #792 by VickyPicky
Render all Cancel Events #789 by VickyPicky
Render business rule task #709 by benjaminParisel
Render compensation events #707 by alachambre (Adrien is a faithful Hacktoberfest contributor as he also contributed again in 2021)

👍 This first round of contributions allowed us to improve the documentation, how we present the project and the way we interact with the community. This helped us a lot in 2021.

That’s all folks

We were super happy to participate in Hacktoberfest 2021 🥰, to receive contributions and to get feedback from the contributors.

We plan to participate again in 2022 🥳. In the meantime, feel free to contribute to the Process Analytics on GitHub or to contact us if you have any questions 👋.

And don’t forget, to stay on top of the latest news and releases, follow us through:

Website: https://process-analytics.dev
Twitter: @ProcessAnalyti1
GitHub: https://github.com/process-analytics

Process Analytics - January 2022 News

Thomas Bouffard — Fri, 18 Feb 2022 15:19:01 +0000

Welcome to the Process Analytics monthly news 👋.

As you know, the goal of the Process Analytics project is to rapidly display meaningful Process Analytics components in your web pages using BPMN 2.0 notation and Open Source libraries.

2021 is over 🥺. Welcome 2022! 🥳 🎉 On our side, the project team worked hard to prepare the 2022 Roadmap that will be detailed in the next 2022 news.

☃️ We also worked on improving the BPMN Visualization (JavaScript/TypeScript) library. Let’s see what’s new here 👀!

BPMN Visualization JS/TS library

In January, we released 2 versions 📣: 0.21.2 & 0.21.3.

The library now generates a clearer error message when it is unable to parse the BPMN source ✨.

In previous releases, passing malformed content caused the 'load' function to throw an Error with an 'r is undefined' message 😱. It now handles the error correctly and returns a proper error message 💪.

In addition, a window alert was opened on load error. It should have been included only in the demo code and the examples 🤫, but not in the library code. This is now fixed and you can now fully control how you want to display errors in your application 🤗.

⏩ The "load remote BPMN diagrams" example has been updated to display load errors in a toast, as it already did for BPMN diagram fetch status. The recording below 👇 shows the new error management in action and the fixed BPMN load error message as well.

Display load errors in a custom application

Plans for the future

Here are the topics we will be addressing in the coming months:

Continue styling improvements for CSS usage and introduce an API to apply styles to specific BPMN elements 🦄.
Create new examples to demonstrate other process analytics / process mining use cases 🤩.

That’s All Folks!

We hope you enjoyed this January project news and are looking forward to what February will bring 👋.

In the meantime, to stay on top of the latest news and releases, follow us through:

Website: https://process-analytics.dev
Twitter: @ProcessAnalyti1
GitHub: https://github.com/process-analytics

Cover photo by Benjamin LECOMTE on Unsplash

Process Analytics - December 2021 Newsletter

Thomas Bouffard — Wed, 12 Jan 2022 08:08:29 +0000

Welcome to the Process Analytics monthly newsletter 👋.

As you know, the goal of the Process Analytics project is to rapidly display meaningful Process Analytics components in your web pages using BPMN 2.0 notation and Open Source libraries.

Fall 🍁 is over, December says winter is coming ☃️ and hopes that 2022 will be great too 🎁!

On our side, the project team worked hard to propose many new elements in our project:

Website updates
BPMN Visualization (JavaScript/TypeScript) library improvements

The Process Analytics Project website

Newsletter registration

In addition to the news we publish on Medium and dev.to, we will gradually share information by email 🎁.

You can subscribe to the newsletter directly from the Process Analytics website 😊.

Introducing the BPMN Layout Generator tool

BPMN Layout Generator is an experimental project that we started in 2020.

📣 Here’s a brand-new article presenting the project as part of a series that will continue in 2022.

This article shows how you can visualize event logs with the BPMN layout generator.

The BPMN layout generator can automatically generate a BPMN diagram from event logs. Adding BPMN objects such as gateways will help make the visual result clearer.

Generate a process diagram from an event log

BPMN Visualization JS/TS library

In December, we released 2 versions: 0.21.0 & 0.21.1.

In addition to internal improvements, we worked on improving the documentation and the styling capabilities of the library.

Styling improvements

We continued the work we started in November on styling.

As we developed a new demo (which will be available in early 2022 - teasing 😁), we found issues and areas for improvement in the styling/rendering features.

Here are some highlights.

Labels

Previously, the CSS classes added to a BPMN label weren’t correctly applied, so there was no effect in the web browser. See issue #1621 for more details.

This is now fixed, so we can add style to both elements and labels.

In the example below 👇 (preview of the new upcoming demo, teasing again 😱), we reduce the visibility of the starting path of a diagram - to better highlight the part which contains the elements we’re interested in - by blurring and fading those starting elements and their labels. 🤔 This could be used in combination with highlighting current or upcoming
elements.

Styling BPMN labels with CSS classes

Message flow icon

The message flow icon can be styled independently from the message flow itself. Initiating and non_initiating icons can be styled independently as well 🤩.

Icon and message flow are styled differently

Documentation

Along with the styling improvements, we added a dedicated paragraph in the documentation about the BPMN rendering capabilities of the library.

For more detail, see the 📚 BPMN rendering documentation and the ⏩ Custom BPMN Theme examples.

Browser tests

We run a lot of tests to make sure the library always produces an accurate BPMN diagram rendering ✨, especially when updating browsers.
In December, we spent a significant amount of time to add more stability to the test infrastructure and add more tests in some uncovered areas (parsing, styling) 🎉

We were already testing with Chromium, Firefox and WebKit (the Safari engine). We are now running tests with the latest stable versions of Chrome and Edge.

This comes in addition to the tests run on Chromium 🤔. As the Chromium version is ahead of the stable browser channels, this lets us know that future versions of Chrome or Edge won't break the library.

For more details, see the Playwright documentation about browsers.

Plans for the future

Here are the topics we will be addressing in the coming months:

Continue styling improvements for CSS usage and introduce an API to apply styles to specific BPMN elements.
Create new examples to demonstrate other process analytics / process mining use cases 🤩.

That’s All Folks!

We hope you enjoyed this December project news and are looking forward to what 2022 will bring 👋.

In the meantime, to stay on top of the latest news and releases, follow us:

Website: https://process-analytics.dev
Twitter: @ProcessAnalyti1
GitHub: https://github.com/process-analytics

Cover photo by Lynda Hinton on Unsplash

The story of Bonita Documentation! The need for a new documentation site

Thomas Bouffard — Wed, 08 Dec 2021 11:27:00 +0000

Have you ever had a question, an issue, a need to know something about Bonita? If yes, you’ve probably visited the friendly Bonita Documentation!

In March 2021, we launched the new Bonita Documentation site, which offers fixes and improvements. If you want more details about the new site content, here’s the site go live announcement.

We want to share with you the story of the Bonita documentation evolution in a series to explain how and why the Bonitasoft team decided to make this latest change.

In our previous article, we described the fascinating history of the Bonita Documentation site 2016 version.
Here we’ll show some of the issues we have faced over time and the solution we have been looking for to resolve them.

Issues with Bonita Documentation 2016

The Bonita Documentation 2016 version was designed to manage documentation for Bonita Studio and Bonita Runtime only. By 2020, it was unable to support new needs, and we faced major issues in the user experience, maintenance, and operations that couldn’t be solved easily.

User eXperience

Improvements made with the 2016 version of the Bonita documentation mainly focused on the content and how to update it, but not so much on the User eXperience (UX).

The site didn’t have a useful bookmark system. There weren’t real anchors in its pages, so it was hard to bookmark a specific section and to navigate between related content on pages and sections.

The embedded search feature was also limited due to the lack of proper anchors. Clicking on a search result didn't send the user to the paragraph that matched the search request, but to the top of the page instead. There was then no other choice but to scroll in the page looking for the expected paragraph.

“Recycling” by Griszka Niewiadomski

SEO was also an issue. Some pages of very old documentation versions were better indexed than their related page in the latest version, so search engines sometimes led the reader to outdated content. Navigation to new content required extra clicks and extra searches in the documentation site.

One of the impacts of these issues was that readers could too easily miss the information they were searching for. This was not the best user experience and we wanted to do better.

Maintenance

The Bonita Documentation 2016 version involved custom Python scripts to aggregate document contents coming from various sources, using one repository per documentation component and a branch per version.

This documentation content structure worked perfectly well, as

branches were useful for for updates backport/cherry-pick/merge
repositories were useful for content segregation, access management, product and documentation lifecycle alignments.

Each branch in each repository was responsible for generating its documentation part; the aggregation scripts were in charge of assembling everything and adding the final styles.

Initially this worked well, as there was only a single documentation component (the Bonita platform) and only a few versions.

Over time though, the Bonita portfolio has grown and now contains more products (including Bonita Continuous Delivery, and Bonita Cloud), so more components and more versions were added to the documentation.

Duplications of repositories began to appear and we had to make changes in multiple places. Inevitably more and more problems arose. For example:

At one time, it was possible to generate a PDF file for a given version of a component. This function was abandoned as it did not work properly, but was still present in all branches.
The build process of all versions was full of unused tools and dependencies. This slowed down the build.
We accepted changes in Markdown with custom syntax (for instance, to manage information and warning blocks), native HTML tags, and Font Awesome icons. But minor changes then had to be replicated to all repositories.

As noted, the Bonita Documentation 2016 was complex and hard to maintain. It used an aged technical stack and it was especially hard to build. Developers who may have been able to implement changes were not very encouraged to do so!

We saw very few technical updates, fewer and fewer bug fixes, and the user experience issues remained.

Operations

The Bonita Documentation 2016 version had continuous deployment and preview environments. This was perfect for day-to-day work; changing the documentation content was straightforward. The changes were propagated from staging to production transparently.

“Pull Request Flow” taken from the Agile Grenoble 2017 presentation “Fluidifier la production de la documentation”

But we also faced operational pains.

Adding a new component version (for instance, when preparing a new Bonita beta version) involved multiple actors and synchronization.

The configuration to actually manage the version was spread across several locations.
Synchronization was done using tickets, and direct conversations.

This lack of ability to self-service updates slowed down the process a lot and generated frustration.

The documentation site build, and deployment to the preview and production environments, were all managed with internally-operated Continuous Integration servers (Jenkins).

Internally-operated meant dealing with Jenkins and server updates. As it involved a large amount of custom scripts and Jenkins jobs, this also meant maintenance to follow the Jenkins evolutions.

The pre-production and production environments were composed of front-end and search (Solr) servers, also operated internally. This was another area for regular maintenance costs.

As we didn’t rely on a CDN, the latency could be high depending on the location a user was browsing the documentation from.

The previous Drupal-based documentation

Prior to the Bonita Documentation 2016 version, Bonita documentation (for Bonita BPM v6.0 to v7.2) was managed on Drupal.

This content had to stay online for a transition period, up until the versions reached end-of-life. As often happens with legacy assets, it was still available years later.

There were no plans for decommissioning or migrating, and it contained very old content which hadn’t been updated for a while.

It had its own dedicated infrastructure still live more than 4 years after the rollout of the Bonita Documentation site 2016 version. The operations team had to deal with security (stack hard to update) and user experience concerns (no changes to the site while browsers have evolved, resulting in some broken features).

Photo by Thiébaud Faix on Unsplash

The New Solution: What We Dreamt About

All the issues explained above began to have more and more impact on Bonita documentation users. We really wanted to get in there and improve the site!

We first prototyped a new solution based on Jekyll for HTML generation, keeping most of the existing Markdown content and the Python aggregator. We also investigated moving the search solution from Solr to ElasticSearch.

While having a true static site was a great improvement, a lot of issues remained unresolved.

The prototype only addressed a part of the user experience issues; maintenance and the operations sides still presented issues. The site still included a lot of custom code in particular for the content aggregation.

So this approach was not a game changer, although it was a way to do basically the same thing better. But ultimately it didn’t provide enough improvements.

So we decided to change our direction, go back to simplicity, and approach everything globally.

User experience (UX)

The first prototype confirmed that we needed a static site that could provide a good UX especially on mobile (which wasn’t that good in the existing site) and good SEO out of the box.

Maintenance

Reducing maintenance time and complexity was one of our main concerns.

We needed a simpler solution to maintain and deploy; we wanted to rely on existing and widely used tools (a lot of products have the same documentation needs as ours, so solutions exist for our use case), and reduce customization at the minimum (theming).

The Bonita Documentation site 2016 version worked perfectly for porting documentation content changes from version to version. We wanted to keep that, but have a simpler build that wouldn’t be split across repositories.

For a long time, keeping Markdown as a markup language was mandatory. We wanted to avoid doing content migration and training documentation contributors, but this should not stop us from using a better adapted solution if it supports only other languages (as long as we can migrate the existing content and it is easy to learn). We wanted to have a markup language for text diff/merge with Git and Markdown was one way to achieve that.

Operations

We needed to get rid of silos, to have a more self-serve solution to avoid tickets, team synchronization issues, and bottlenecks.

This also meant using configuration as code as much as possible, and automation for continuous preview and deployment. So we imagined a more comprehensive solution where we would no longer operate the Continuous Integration/Deployment, search, and front-end servers ourselves.

We wanted to focus on using them, not on maintaining and upgrading them. So we felt that this would probably involve using a PAAS solution, to provide more features for High Availability and Content Delivery Network.

For the old Drupal solution, we decided we needed to find a way to keep the content but drop the related infrastructure, or be ready to definitively remove it.

Photo by Drew Beamer on Unsplash

Coming soon

This article presents the issues of the Bonita Documentation site 2016 version and why we needed to provide a refreshed site. In it, I have outlined both the issues and our “need to have” and “want to have” requirements to select a new solution for improvements.

In the next article, we’ll explain the actual technical choices we made for the new online documentation, and what we learned about our new technical stack from the migration. (Hint: we’re still here, and so is the Bonita documentation!)

Process Analytics - November 2021 Newsletter

Thomas Bouffard — Mon, 06 Dec 2021 16:01:48 +0000

Welcome to the Process Analytics monthly newsletter 👋.

As you know, the goal of the Process Analytics project is to rapidly display meaningful Process Analytics components in your web pages using BPMN 2.0 notation and Open Source libraries.

Fall is 🍁 here 🍂, November blows 💨, December says winter is coming! On our side, the project team worked hard to propose many new elements in our project:

new website pages
BPMN Visualization (JavaScript/TypeScript) library improvements

Website: blog posts and news

To avoid overwhelming everyone with too many articles on the web site Home page (because we love to write 😆 ), we’ve decided to limit what’s shown on the page.

💡 Want to access to all blog posts? Click on the ‘See all’ at the bottom of the blog section and go to the new “Blog Posts” page. It’s all there!

And what happens to the “News” section 🤔 ? A dedicated page is also available.

BPMN Visualization JS/TS library

In November, we released 3 versions: 0.19.5, 0.20.0 & 0.20.1.

In addition to internal improvements, we worked on improving the styling capabilities of the library using CSS and the documentation.

Fix pointer-events on label

In previous versions, Pointer Events on labels were captured as if they came from outside of the shape.

This prevented click, hover and other interactions from working correctly. This mainly applied to BPMN activities, because the label is inside the shape for these BPMN elements.

This is now fixed as shown in the following comparison examples.

CSS classes are correctly applied to the Message Flow icons

Previously, it wasn’t possible to style the icons with CSS. This is now fixed.

Future versions will improve the styling capabilities for the icon (see #928).

Plans for the future

Here are the topics we will be addressing in the coming months:

Continue styling improvements for CSS usage and introduce an API to apply style to specific BPMN elements.
Create new examples to demonstrate other Process analytics / Process Mining use cases.

That’s All Folks!

We hope you enjoyed the November project news and are looking forward to what is coming with the Winter 👋.

In the meantime, to stay on top of the latest news and releases, follow us through:

Website: https://process-analytics.dev
Twitter: @ProcessAnalyti1
GitHub: https://github.com/process-analytics

Cover photo by FerNando on Unsplash

DEV Community: Thomas Bouffard

Looking Ahead: maxGraph in 2025

Documentation and Examples: Making maxGraph Easier to Use

What’s Next?

Tree-Shaking: Shrinking the Library Size

What’s Next?

Other Topics for 2025

Stabilization and Bug Fixes

Defining the Public API

Wrapping Up

Process Analytics Monthly Report - April 2023

Process Analytics - April 2023 News

bpmnVisualizationR package

Improvements in the bpmn-visualization pmp4py demo

That’s All Folks!

Process Analytics - March 2023 News

Highlights from our participation at Bonita Day

Our demo at Bonita Day: a look inside

The Process Analytics Project website

bpmn-visualization TypeScript library

Update style programmatically

That’s All Folks!

Bonita online documentation needs some Hacktoberfest 2022 love!

What?

Who?

How?

Process Analytics - August 2022 News

Project presentation series

Website: start of the new design

bpmn-visualization R Package

bpmn-visualization JS/TS library

More styling capabilities for Text Annotation elements

Demo improvements

A new Light Blue BPMN theme

More space for diagram rendering

That’s All Folks!

Process Analytics - May 2022 News

Website updates: Announcing the “Model Generation Application”

bpmn-visualization JS/TS library

New Zoom API 📚

New TypeScript example in the browser 🎁

GitHub repository figures 😻

That’s all folks!

Process Analytics - February 2022 News

BPMN Visualization JS/TS library

That’s All Folks!

Hacktoberfest 2021: Process Analytics makes its mark

Hacktoberfest 2021 results

Website

BPMN Visualization R Package

BPMN Visualization Examples

Comparison with Hacktoberfest 2020

That’s all folks

Process Analytics - January 2022 News

BPMN Visualization JS/TS library

Plans for the future

That’s All Folks!

Process Analytics - December 2021 Newsletter

The Process Analytics Project website

Newsletter registration

Introducing the BPMN Layout Generator tool

BPMN Visualization JS/TS library

Styling improvements

Labels

Message flow icon

Documentation

Browser tests

Plans for the future

That’s All Folks!

The story of Bonita Documentation! The need for a new documentation site

Issues with Bonita Documentation 2016

User eXperience

Maintenance

Operations

The previous Drupal-based documentation

The New Solution: What We Dreamt About

User experience (UX)

Maintenance

Operations

Coming soon