O3 Feature: Draw on a body diagram

It would be a cool project (eg for GSOC?) to have a frontend app for drawing. eg like any of the following (found on google images):


I wonder if there is an opensource drawing library/app already published online somewhere we could pull in through a microfrontend app.

1 Like

This request has come up several times – for palliative care and physical therapy. Would be cool.


1 Like

Sure this is cool for physical therapy

@johnblack reminded me of another use case for cervical cancer screening:

1 Like

@ball another use case is in burns: see the “rule of 9s” and related adjustments for obesity and children Wallace rule of nines - Wikipedia



And for documenting clinical exam findings, e.g. which quadrant of the breast has a nodule

or the stage of lymphoma


Fabulous examples!!! Thank you both. In a previous job we worked on this body diagram idea (for patient input actually) and the scope can go very very wide - from body sections, to checkboxes (like below), to dots, to MSpaint-like drawings, to highly detailed specific labels (Xs, //s, etc) in pain diagrams (like below). And great suggestion @ball I did indeed see hand-drawn Cervical VIA/VILI test diagrams very very frequently in most HIV clinics we shadowed in earlier this year in Kenya.

The scope exploded though when we tried to envision concept-label-detection based on the area drawn on (e.g. clicking right arm → system also encodes “right arm” etc). Once we removed that scope and focus on simple diagram tools it was easier to get an MVP out. But that idea has always stayed with me.

@grace , that’s a great feature! We have developed this in O2 for Physiotherapy:


The data coming from the HTML form are sent to Odoo for material request.

There is a need for the hospital program to indicate the place of injury: image

But we haven’t done it in O3. I saw a module in the past (O2) that allowed the user to select a diagram from a template, then click on the image and add a text or an audio. I thought that was a neat feature but hard to analyze data or send it to another system.

cc: @mksd @mksrom


Thanks @jesplana - those are great examples that I know well :slight_smile: It is worth noting that the ICRC did quite a lot of work in reviving the old Drawing module between Oct 2019 and Sep 2021 to support this work in O2 and HFE through versions 2.0.0, 2.0.1 and 2.1.0 of the module.

Again, very recently in the context of the NCD-related work that we do with Cambodia MOH @pauladams stumbled upon this cervical cancer screening paper form to be digitised (in O3 this time):

In this case the screening nurse/doctor is supposed to draw areas within the cervix’s oval, which can be quite tricky to do with old mouses and touchpads.


I forgot to mention, for PRP, those are drawings embedded to the form and we mapped the fields on the image to correspond to the location of the areas being measured.

For hospital, as @mksd mentioned, we worked on the drawing module to achieve this functionality. The hospital admission has the following features:

  • Add a note to the image (in red and can freely draw using free hand or a line.)
  • Attach an image

hello, good afternoon,

I have a question about how I contribute to this project for GSOC 2023. what kind of resources do I need?

hi @parthis thanks for your interest in this project. Have you checked out this?;

  1. reference

  2. Reference

  3. Reference

@grace @mksd @ball @dennis @dkayiwa @vasharma05 @jwnasambu

This means sir in this project I need to draw the models

Trying to understand your question! technically models provide the community members with a visual of your idea and how it will meet the the intended use cases. Meaning for you to come up with functional and nonfunctional requirements of the idea you need a conceptual model.

Mainly this project is lavereging the 03(if you have not realised) for collaboration and better user experience through MFEs.


  1. Proficiency in Javascript(React, Typescript…)

  2. Knowledge in MFEs(Microfrontends)

  3. Knowlegde of Java(read the 02 modules)

@ibacher @dkayiwa @mksd @grace @jnsereko @dennis

1 Like

ok, sir thank you for answering that really help me. I have knowledge of basic javascript and React .

1 Like

@grace @ball @mksd @johnblack @jesplana @thembo42 Looks like there is interest in this project for GSoC, which means… We’ll need primary and backup mentors to work with a GSoC contributor over the summer. Do you know someone who might be a good mentor for this project? Would like to be a mentor yourself? Let us know!


hey guys I made some comments on a potential implementation idea for this on the thread linked below, please take a look


Hi everyone, adding the body diagram example for MSF forms:

Ideally, the diagram could adapt to the age and gender of the patient, and show at least 2 sides of the body (front-rear).

@grace, @heshan, how could we help?

@jesplana @ball @jennifer

1 Like

@michaelbontyes this is great thought and your help will be highly welcome.

You can kindly take a look at the latest updates and discussion here;