Flipchart for Confluence

• 

  Sample diagram created in Flipchart

• 

  Prepared jira workflow - another sample in Flipchart

• 

  How to add and use the Flipchart - another sample in Flipchart

• 

  Flipchart basic architecture - another sample in Flipchart

Inspiration

Our work is a place where we like to meet and discuss our ideas. There is always a board available for us to model all the components of the project we work on. Coronavirus changed everything. There was no other way than to work remotely. We started meeting online. Only then did we realize that we needed some new opportunities to share our ideas. We needed a tool for simultaneous modelling and designing a project so that we would have a visible effect later. However, we didn't want to change the tools that we are so familiar with, for example Jira, Confluence, Bitbucket.

What it does

Flipchart enables you to model diagrams on the page published in Confluence. Thanks to that, anyone who has access to a page can cooperate to design the desired content. After a user creates a meeting note and adds a flipchart macro to it, other users can edit the content live.

How we built it

We used Atlassian Connect to create Flipchart macro. We learnt how to use NodeJs and JointJs. We had to handle users' connections and communication between them. The application is based on WebSockets communication for the exchange of information between the author of the modifications and the meeting subscribers. We used the observer design pattern in connection with event sourcing architecture. Unlike Forge, Atlassian Connect could handle this. Forge doesn't support dynamic content macros which we used to show and edit diagrams.

Challenges we ran into

The biggest challenge was time pressure since we joined hackathon 2 weeks before the deadline. Additionally, we had to find a solution how to disable concurrent modification of the same item of the diagram. In this way, the users wouldn't affect the cohesion of the diagram data. Another issue to work on was the creation of events which would recreate the diagram for new participants of the meeting.

Accomplishments that we're proud of

We succeeded in delivering the tool based on the engine which coordinates the work of the concurrent users. We also managed to deliver a basic functionality which helps to create diagrams.

What's next for Flipchart

The macro we created can be a starting point for new functionalities used to create advanced diagrams. We also want to improve the user's interface. Should you have any feedback or suggestions, feel free to contact us.

Flipchart will eventually be part of Atlassian Marketplace.

Built With

• atlassian-connect
• confluence
• heroku
• javascript
• jointjs
• node.js
• websockets