Dinogram
Description
Dinogram is a web application that brings together diagramming, note-taking, brainstorming, and more into a single, unified workspace.
I built this tool because, during project planning, I often found myself switching between multiple applications—notes in Obsidian, Notion, or Google Docs; diagrams in Miro or Google Drawings; and sketches in Photoshop, Illustrator, or Affinity Photo. This constant context-switching felt inefficient, so I set out to build a solution that would consolidate these functionalities into one seamless experience.
Dinogram provides an infinite canvas where users can freely arrange various content types, including:
I built this tool because, during project planning, I often found myself switching between multiple applications—notes in Obsidian, Notion, or Google Docs; diagrams in Miro or Google Drawings; and sketches in Photoshop, Illustrator, or Affinity Photo. This constant context-switching felt inefficient, so I set out to build a solution that would consolidate these functionalities into one seamless experience.
Dinogram provides an infinite canvas where users can freely arrange various content types, including:
- Rich text for structured notes
- Embedded web pages (via iframes)
- Code snippets with syntax highlighting (using Monaco Editor)
- Videos, including YouTube embeds
- Custom drawings and sketches
- Standard diagramming elements like icons and images
Goals
Infinite Canvas: Enable users to place and arrange content anywhere without restrictions.
Versatile Content Support: Allow embedding and editing of text, images, video, drawings, code snippets, and iframes.
Efficient UI for Content Management: Provide an interface that makes it quick and easy to find, select, and reposition elements.
Customizable Elements: Support adjustments like borders, rotation, text formatting, and color options.
Layer Management: Implement a layer panel similar to Figma or Photoshop to control stacking order, visibility, and element locking.
Local Storage: Ensure that projects persist without requiring external accounts or cloud storage.
Challenges
Implementing Axis-Locked Dragging: React Flow, the library used for managing the infinite canvas, does not natively support axis-locked dragging (i.e. restricting movement to only horizontal or vertical when holding Shift).
Undo/Redo Functionality: React Flow does not provide built-in undo/redo capabilities, which are essential for an application where users frequently make layout changes.
Dynamic Element Property Editing: Each content type (text, images, code, video, etc.) requires different customization options, and manually creating a settings panel for each would have been tedious and hard to maintain.
Organizing and Managing Elements: As users added more elements, managing them became difficult without a structured way to view and control them.
Supporting Multiple Content Types While Keeping the UI Intuitive: Integrating a diverse set of content types while keeping the UI simple and intuitive.
Resolutions
Implementing Axis-Locked Dragging: I wrote a custom function that detects the initial direction of movement when Shift is held and locks movement to that axis. Since React Flow only updates the position of the directly dragged element, I also had to manually enforce this behavior across all selected elements to maintain consistency.
Undo/Redo Functionality: I implemented a state history system that records snapshots of the diagram state, including element positions and content. Users can navigate this history to undo and redo actions effectively.
Dynamic Element Property Editing: I used JSON Forms to create a schema-based approach for generating property panels dynamically. This allowed me to define configurations for different element types without hardcoding UI components for each.
Organizing and Managing Elements: I implemented a Layers Panel, inspired by design tools like Figma and Photoshop, where users can:
- View all elements in a structured list
- Reorder stacking order with drag & drop
- Toggle visibility and lock elements
- Delete elements directly from the panel
Supporting Multiple Content Types While Keeping the UI Intuitive: I grouped content types into clear categories within the UI and provided quick-access tools for inserting and modifying elements. Additionally, I designed the interface to prioritize ease of movement and alignment, making it easy to arrange content flexibly.
Handling Embedded Content (Videos, Code): I ensured that videos and code blocks were properly integrated by leveraging Monaco Editor for code snippets and supporting YouTube/video embeds via React-Player.
Tech
TypeScript
React
Redux
React Flow
Material UI (MUI)
Monaco Editor
React-Player