Programming

Diagramming React code

After working on a Typescript diagram format I wanted to focus on a React equivalent. Diagrams can be useful for various purposes: Designing a solution at a high-level before writing any code Understanding an existing code-base by diagramming it Quickly sketching ideas to compare different designs or work out a refactoring strategy In this article I'll describe a UML-influenced diagramming format for React. Overview The format consistent of the following elements: Component - rectangle with title and list of props Component call - caller to callee connected with solid-arrow-terminated line Component call with props - caller to props and props to callee connected with solid-arrow-terminated line Component render props - render prop rectangle connected to component with dot-terminated line Function - rectangle with title and list of parameters Type or interface - rectangle with title and list of props Component A component is depicted with a depicted with a rectangle with descriptor and title at the top and, optionally, props underneath. Component call A component can render another component – here this is referred to as a "component call". A component call is depicted with a line from the caller component rectangle to the callee component rectangle, terminating in a filled arrow symbol. Component call with props A component can pass props to another component – here this is referred to as a "component call with props". A component call with props is depicted with a line from the caller component rectangle to a props rectangle and another line from the props rectangle to the callee component rectangle, terminating in a filled arrow symbol. The props are depicted in a props rectangle, in which each prop has its own rectangle. This allows any individual prop to be linked to a type, function or component rectangle. Component render props Render props are props for which we pass a React component, a function which renders a component or a React node. A render prop is depicted with a line from the prop box to a Component or Function rectangle, terminating in a dot symbol. Function Same as in the Typescript diagram format, a function is depicted with a rectangle with descriptor and title at the top and, optionally, parameters underneath. Type or interface Same as in the Typescript diagram format, a type or interface is depicted with a rectangle with or descriptor and title at the top and, optionally, fields underneath. A composition relationship between types or an inheritance relationship between interfaces is depicted with a line from the composer/inheritor to the composed/inherited type/interface, terminating in an empty arrow symbol. A reference relationship between two components, functions, types or interfaces is depicted with a line from the referencer to the referenced, terminating in an arrow symbol. Example: contacts list Here's an example of a React diagram depicting components that make up a contacts list. ContactsList component ContactsList -> ContactListItem component call with render props ContactsListItem component ContactPhone component ContactEmail component Contact interface getContacts function Downloads To make it easier to use this format, I've implemented them in the following formats, with downloadable templates: Mermaid • Download: diagramming-react.mermaid.md Draw.io • Download: diagramming-react.drawio Figma • Download: diagramming-react.fig

Jan 18, 2025 - 11:55

After working on a Typescript diagram format I wanted to focus on a React equivalent.

Diagrams can be useful for various purposes:

Designing a solution at a high-level before writing any code
Understanding an existing code-base by diagramming it
Quickly sketching ideas to compare different designs or work out a refactoring strategy

In this article I'll describe a UML-influenced diagramming format for React.

Overview

The format consistent of the following elements:

Component - rectangle with title and list of props
Component call - caller to callee connected with solid-arrow-terminated line
Component call with props - caller to props and props to callee connected with solid-arrow-terminated line
Component render props - render prop rectangle connected to component with dot-terminated line
Function - rectangle with title and list of parameters
Type or interface - rectangle with title and list of props

Component

A component is depicted with a depicted with a rectangle with <> descriptor and title at the top and, optionally, props underneath.

Component call

A component can render another component – here this is referred to as a "component call".

A component call is depicted with a line from the caller component rectangle to the callee component rectangle, terminating in a filled arrow symbol.

Component call with props

A component can pass props to another component – here this is referred to as a "component call with props".

A component call with props is depicted with a line from the caller component rectangle to a props rectangle and another line from the props rectangle to the callee component rectangle, terminating in a filled arrow symbol.

The props are depicted in a props rectangle, in which each prop has its own rectangle. This allows any individual prop to be linked to a type, function or component rectangle.

Component render props

Render props are props for which we pass a React component, a function which renders a component or a React node.

A render prop is depicted with a line from the prop box to a Component or Function rectangle, terminating in a dot symbol.

Function

Same as in the Typescript diagram format, a function is depicted with a rectangle with <> descriptor and title at the top and, optionally, parameters underneath.

Type or interface

Same as in the Typescript diagram format, a type or interface is depicted with a rectangle with <> or <> descriptor and title at the top and, optionally, fields underneath.

A composition relationship between types or an inheritance relationship between interfaces is depicted with a line from the composer/inheritor to the composed/inherited type/interface, terminating in an empty arrow symbol.

A reference relationship between two components, functions, types or interfaces is depicted with a line from the referencer to the referenced, terminating in an arrow symbol.