A drawing should be something you can follow

A process diagram can look clear while leaving its connections difficult to navigate. I wanted a person following a support request to be able to choose a named branch, reach the object it actually points to and edit the drawing without losing that relationship.

Accessible Canvas starts from the real MIT-licensed Excalidraw editor. The new work added after October 5 includes a structure navigator, named connection following, precise object editing, an independent semantic evaluator and a supervised release workflow. The original editor and its notices are retained. The drawing and the navigator use the same native scene objects.

The task in the demo

A support request arrives without enough information. Choose No from the decision and reach Request details. Rename that step to Request missing details, then add a Details received connection back to Validate request. Undo removes the new connection and redo restores it. Export saves the actual scene.

The film then opens the saved drawing again. The clearer label and return connection are still present. Following Details received reaches Validate request; a request with enough information can take Yes to Resolve and continue to Close. These actions operate on Excalidraw's real objects, selection and history.

Building and releasing the change

I deliberately introduced a destination-lookup defect in the semantic projection. A connection could lead back to its starting object instead of its destination. GitLab Duo Agent Platform investigated the fixed source and proposed the one-line change to use the ending binding.

The controller reconstructed that edit, created merge request 4 and ran the candidate and protected checks. GitLab CI compiled the complete imported editor, and Google Cloud staged the resulting image. In this Supervised workflow, acceptance remains an explicit step before promotion. The October 21 release passed eight associated pipelines, reached production and completed its exact source merge.

The acceptance record contains eight automated browser tasks covering both branches, keyboard navigation, editing, undo and redo, a bound connector, export and import, mobile layout and the editing-tools toggle. The exported scene's twenty-three object identities, semantics and absolute arrow geometry survived the round trip. Excalidraw normalized some internal representation, so preserving meaning was the useful test.

The hard part and what I learned

The challenge was keeping a second representation of the diagram connected to the editor people already use. A renamed label has to update native text geometry. Undo and redo have to use the real history. Following an arrow has to select the real destination. Narrow upstream changes expose the existing history and layout behavior instead of building a disconnected drawing imitation.

I learned to test the relationship between views and the actions they enable. A screenshot cannot tell us whether a named connection reaches the right object or whether an exported scene will reopen correctly.

This is intended for people who navigate process diagrams through names and keyboard actions, and teams that want to inspect those semantics before releasing an editor. So far, I have checked the workflow with automated Chromium tests, including a mobile viewport and reduced motion. Next I want to test it with diagram users and with VoiceOver and NVDA. The working editor, public MIT source, CI history and deployment recipes let judges try the actual task today.

Try the project | MIT source and CI | Watch the demo

Built With

Share this project:

Updates

Submission history