O3: Draw on a body diagram — New Implementation

Hi everyone :waving_hand:,

In the 2023 GSoC archive, there is an incomplete but interesting task, which is Draw on Body Diagram. From past discussions, this looks like a highly requested and important feature for O3 that could make a real impact for the community and meaningfully improve clinicians’ workflows.

Quick summary of the feature

OpenMRS has previously (O2) supported uploading and visualising patient conditions through diagrams, which helps doctors explain conditions to their patients more clearly, but O3 is missing this essential functionality. This feature aims to improve the diagramming feature by allowing users to upload any diagram as an image, annotate specific areas with shapes, save and retrieve annotated diagrams, and download them as images with the annotations included.

Core requirements,

  • Upload any diagram as an image to the module
  • Annotate areas of the diagram with shapes (circles, squares, single points, etc.)
  • Save annotated diagrams for future reference
  • Retrieve diagrams from a list of already saved ones

Additional requirements,

  • Draw freehand shapes and annotate them with descriptive text
  • Download diagrams as images with the annotations, for easy sharing and printing

My current understanding and proposed approach

I’m planning to add a new input type, something like “Annotated Diagram” that can be used to build questions in the React form builder engine. When filling out a form, the user would see this field and be able to either upload a new image or select a previously saved template diagram (provided by the annotation feature), annotate it, and submit. Once submitted, the attached diagrams would appear in the Attachments section.

I’ve put together a quick diagram of how I’m envisioning this (below). Before moving forward with development,

I’d love to get your clarification, improvements, and direction on the requirements to make an implementation plan with the following things:

Implementation plan guide
  • A good requirement analysis
  • A good explanation on how to handle different image types
  • Good data structure design to store diagram meta data
  • Plans on,
    • How to handle the diagram upload and store
    • How to handle the editing of the diagram on the frontend
    • How to render those diagrams properly with the edits
  • Set of wireframes for the UIs
  • The list of API endpoints that is needed to support those UIs
References

O3 Feature: Draw on a body diagram

https://openmrs.atlassian.net/wiki/spaces/RES/pages/26278478/GSoC+2023+O3+Draw+on+a+body+diagram

@jayasanka

2 Likes

Thanks for showing interest in this project @kavindaweerasinghe :flexed_biceps:

@thembo42 what are your thoughts on these ideas? I see there was an ongoing conversation here :backhand_index_pointing_right: (WIP) Draw and Annotate app features by jona42-ui · Pull Request #12 · openmrs/openmrs-esm-draw-app · GitHub

2 Likes

Weekly Call Summary - 07/22/2026

I had the first weekly call with @jayasanka for the purpose of getting a starting point and checking my understanding of the task.

At first, I explained my findings from my own observations of the system for the drawing feature. I also explained how I set up the drawing module using the drawing OMOD file on O2, to understand how the previous module works. Every step was easy thanks to the well-documented Wiki pages.

Initially, I went through my approach based on the original published task, which seemed quite flexible and a bit complex as a starting point, since I focused on giving a solution to the exact question. However, he showed me a scoped-down version as a starting point that we can build on eventually.

His Input

  • He explained the flow of clinical forms: how to create a new one, why they’re used, and why it really matters.
  • For the initial steps, we only need front body and back body questions, and there might be more than one image per question.

  • Once a form is submitted, we can’t undo it, but a reset option is available.
  • He suggested hardcoding values for templates at this initial stage.
  • Adding new templates to the annotation feature is administrative work with its own workflow most of the time, so we don’t need to worry about that for now. Just go with hardcoded front and back body images.
  • He mentioned we need to look at the ICRC setup to understand how they work with this, since it’s crucial to observe how the previous implementation works and align our new implementation with it.

Next Steps

  • Design a wireframe showing the flow, explain it, and gather feedback in the squad call meeting.
  • Make an epic and tickets.
  • Update the Talk thread.
  • Research good annotation libraries to use.
  • Set up the form engine repo, start implementation, and make a dummy JSON to check the question type first. If it’s okay, we can do more development.

Planned wireframe to implement the initial steps

Design link : https://claude.ai/code/artifact/dd204e03-bd10-4ce6-a274-39b2cb0cd739