Code blocks in FigJam

Code blocks allow you to add formatted code as a movable object on the board and include syntax highlighting for several supported languages.

Use code blocks for:

• Collaborative problem solving
• Technical design explorations
• Technical architecture interviews
• Creating diagrams with code

Create a code block

From the toolbar

1. Hover over the pile of recently used icons in your toolbar.
2. Click the More button to open the modal.
3. Select the More tab.
4. Select Code block.

Once your code block is on the board, you can immediately start typing to add text.

Keyboard shortcut

Use the keyboard shortcut:

1. Press `.
2. Hover the code block preview over the board to pick a spot.
3. Click to drop the code block.

From existing code blocks

When you hover over the edge of a code block on the board, a quick create icon appears that lets you create a new code block in that direction. You can create a new code block to the top, right, bottom and left of a code block on the board.

1. Add a code block to your board.
2. Hover your cursor over a side of the code block to activate the quick create icon.
3. Click to create the next code block in that direction, or drag the preview to any location on your board.

A new code block is created, with its text field active.

Keyboard shortcut

You can also use the following keyboard shortcuts to quickly create a code block:

1. Select an existing code block.

2. Use the keyboard shortcut:

   Mac: ⌘Command Return

   Windows: Control Enter

A new, blank code block will appear next to the original one with text field active.

Duplicate

To duplicate a code block:

• Select an existing code block, then use the keyboard shortcut:

  Mac: ⌘ Command D

  Windows: Control - D

• Or, press Option or Alt then click and drag from an existing code block.

In either case, the original code block is duplicated along with any code inside it.

Add connectors

Add connectors between code blocks to diagram flows or create paths for others to follow.

1. Click in the toolbar.
2. Select between an elbow or straight connector. You can also use the keyboard shortcuts X to create an elbow connector, and L for a straight connector.
3. Click and drag your cursor between the objects you want to connect.

Once created, you can click and drag a connector's start or end point to another object, or another side of the same object.

Learn more about creating connectors →

Edit code block

You can edit a code block's width and syntax highlighting. Edits can also be made in bulk to a group of selected code blocks.

To edit a code block:

1. Select one or more code blocks by:
   • Clicking on a single code block
   • Clicking and dragging your cursor over multiple code blocks
   • Or, clicking on multiple code blocks while pressing Shift
2. Edit the width of the code blocks or use the toolbar to edit syntax highlighting.

Syntax highlighting

You can change the selected language for a code block's syntax highlighting.

The full set of supported languages include:

1. C++
2. CSS
3. Go
4. GraphQL
5. HTML
6. Javascript
7. JSON
8. Kotlin
9. Python
10. React
11. Ruby
12. Rust
13. SQL
14. Swift
15. TypeScript (default)

To change the selected language:

1. Select a code block
2. In the inline toolbar, click on the dropdown menu and select a new language.

Resize code blocks

Since the height of a code block depends on the lines of code contained, only the width is editable.

To edit the width of a code block:

1. Select a code block
2. Click and drag the right or left edge to change the code block's width.

Learn more about resizing objects in FigJam →

Delete a code block

To delete a code block from your board:

1. Select one or more code blocks by:
   • Clicking on a single code block
   • Clicking and dragging your cursor over multiple code blocks
   • Or, clicking on multiple code blocks while pressing Shift
2. Press Delete.