FigJam example code

Embed code snippets

Use code blocks to embed relevant code snippets directly in your FigJam diagrams. This allows you to reference the code while mapping out the user flows, dependencies, and overall architecture.

javascript
function fetchOrderHistory(userId) {
  return axios.get(`/order-history/${userId}`)
    .then(response => response.data)
    .catch(error => console.error(error));
}

Annotate code with notes

Add sticky notes or text blocks next to the code to annotate it with additional context, questions, or explanations. This helps communicate the purpose and usage of the code to other team members.

python
def calculate_tax(price, tax_rate):
    return price * tax_rate

*Make sure to handle edge cases like negative prices or tax rates over 100%*

Visualize API calls

Use FigJam's diagramming tools to map out the flow of API calls between different components or services. Embed the relevant code snippets for each API endpoint to provide more context.

ruby
get '/orders/:id' do
  order = Order.find(params[:id])
  order.to_json
end

Document data models

Create diagrams to document the data models and schemas used in your application. Embed sample data or code snippets to illustrate how the data is structured.

json
{
  "id": 123,
  "customer_id": 456,
  "items": [
    {
      "id": 1,
      "name": "Widget",
      "price": 9.99,
      "quantity": 2
    },
    {
      "id": 2,
      "name": "Gadget",
      "price": 4.99,
      "quantity": 1  
    }
  ],
  "total": 24.97,
  "status": "shipped"
}

By combining FigJam's diagramming capabilities with the ability to embed code blocks, you can create rich visualizations that document your application's architecture, dependencies, and implementation details. This helps align the entire team on how the system works under the hood.