GSoC 2023: O3: Draw on a body diagram

Primary Mentor
Secondary Mentor
Assigned tothembo jonathan 


OpenMRS is a medical record system that has previously allowed the uploading and visualisation of patient conditions through diagrams. This feature has been critical in helping doctors better explain patient conditions to their patients. However, the module lacked certain essential functionalities that could improve the user experience. Therefore, this project aims to improve the diagramming feature in OpenMRS by allowing the upload of any diagram as an image, annotation of certain areas of the diagram with different shapes, saving and retrieving these diagrams, and additionally downloading them as an image with the edited annotations.


The project has two parts, essential and desirable objectives. The essential objectives aim to provide the basic functionalities for uploading and editing diagrams while the desirable objectives enhance the user experience by adding more features.

Essential Objectives:

  • Allow users to upload any diagram as an image to the module
  • Enable users to annotate certain areas of the diagram with different shapes such as circles, squares, and single points, etc..
  • Allow users to save the annotated diagrams for future reference
  • Enable users to retrieve diagrams from a list of already saved ones

Desirable Objectives:

  • Allow users to draw free shapes on the diagram and annotate them with a description text
  • Enable users to download the diagrams as images with the edited annotations, allowing for easy sharing and printing.

Implementer Request Features

  • the form engine now allows attachment for complex obs

Discussion on form controls for diagrams

Handling Complex obs in the OpenMRS  React form engine

The improved diagramming feature in OpenMRS will make it easier for doctors to communicate patient conditions to their patients, leading to better health outcomes. This project will require proficiency in programming fundamentals, OpenMRS 3 microfrontend architecture, Single Page Application, OpenMRS API.

Tech Stack

  • React
  • Typescript
  • Java
  • SQL

Project Rating and length

175 hours

Medium Project

Draw On Body Diagram Examples

Weekly Blog Posts

Meeting Notes

Meeting 1: Project Kick-off and Agenda Discussion

- Date: May 5, 2023

- Participants: thembo42, heshan, jayasanka, grace, jesplana, pauladams, cduffy, mksd, ibacher, ball, johnblack, mogoodrich, burke, kdaud


- Introduction to the o3:Draw-on-body-diagram project and its objectives.

- Overview of the main project objectives: essential and desirable.

- Introduction of mentors and student participants.

- Discussion of project resources and references.

Meeting 2: First Mentor Meeting

- Date: May 12, 2023

- Participants: thembo42, heshan, jesplana, burke


- Pro Tips and Guidance for successful project implementation.

- Detailed discussion of the project timeline and realistic breakdown.

- Identifying the required technologies for the project and potential updates.

- Exploring UI/UX design considerations, especially with the ICRC team's input.

Certainly, here's the addition of the provided conversation to the relevant meeting minutes in your document:


Discussion Highlights:

- thembo42 presented mock-ups for the Draw On Body Diagram project.

- @jesplana from ICRC provided valuable feedback on the design mock-ups and use cases.

Feedback from @jesplana:

- Clarified the situations in which drawing on the body in an EMR is needed, such as during admission or assessment processes.

- Highlighted the need for larger images to draw on and improve visibility.

- Raised questions about attaching drawings to specific forms and ensuring they are part of patient attachments.

- Discussed the importance of integrating drawings into the attachment page for easy retrieval.

- Emphasized key user actions, including form filling, template selection, drawing, image saving, and side-by-side comparison.

- Provided a link to the ICRC war surgery manual for reference:


This addition captures the feedback and insights provided by @jesplana during the meeting, 

Meeting 3: Technical Insights and Scoping

- Date: May 12, 2023

- Participants: thembo42, heshan, burke, grace, jesplana

Discussion Highlights:

- Avoiding a body-specific solution in favor of a flexible image notation approach.

- Integration of the diagramming feature into the existing OpenMRS system.

- Supported image formats, handling of large images, and storage considerations.

- User roles and permissions for diagramming, testing and validation strategies.

- Tools and libraries for development compatibility with OpenMRS technology stack.

- Scoping and prioritization for GSoC timeline constraints.

Meeting 4: Refactoring vs. Fresh Module Discussion

- Date: May 12, 2023

- Participants: thembo42, heshan, jayasanka

Discussion Highlights:

- Deliberation on whether to continue with refactoring the legacy drawing module or creating a fresh module for the project.

- Seeking guidance on the best approach for the project's architectural direction.

Meeting 5: Backend Focus and Progress Update

- Date: May 16, 2023

- Participants: thembo42, heshan

Discussion Highlights:

- Overview of backend implementation progress.

- Details of database setup for storing annotated images and annotations.

- Implementation of necessary APIs for image operations, including storage, retrieval, and display.

- Intention to integrate APIs from the Attachments module for image upload functionality.

Meeting 6: Update on Image Attachment

- Date: August 14, 2023

- Participants: thembo42, heshan

Discussion Highlights:

- Notifying progress on attaching annotated images to patient attachments.

- Sharing a pull request for the code implementation.

- Seeking feedback on the approach and implementation.


Talk Threads


  • Error rendering macro 'jira' : Unable to locate Jira server for this macro. It may be due to Application Link configuration.

Mockup designs


More Resources

Project Repos