Tutorial: Create a Project Roadmap in Confluence

This tutorial shows how to create a visual project roadmap using DrawMotive's Confluence integration.

Prerequisites

• DrawMotive Confluence macro installed on your Confluence site (see Confluence integration guide)
• Edit access to a Confluence page

Step 1: Insert the Macro

1. Open or create a Confluence page
2. Switch to edit mode
3. Type /drawmotive to find the DrawMotive macro, or use the macro browser
4. Insert the macro — the DrawMotive editor opens in a modal

Step 2: Set Up the Timeline

1. Draw a long horizontal line across the canvas — this is your timeline
2. Apply a Horizontal constraint to keep it straight
3. Add text labels below the line for time periods: "Q1 2026", "Q2 2026", "Q3 2026", "Q4 2026"
4. Space the labels evenly using Point Distance constraints

Step 3: Add Milestones

For each major milestone:

1. Draw a small circle on the timeline at the appropriate position
2. Apply a Coincident constraint between the circle's center and the timeline to keep it attached
3. Apply a Diameter constraint to keep all milestone markers the same size
4. Add a text label above or below with the milestone name

Example milestones:

• "Beta Launch" — Q1
• "Public Release" — Q2
• "Enterprise Features" — Q3
• "Platform Expansion" — Q4

Step 4: Add Work Streams

Create rectangles above the timeline to represent work streams:

1. Draw rectangles spanning the duration of each initiative
2. Label them: "Core Editor", "Confluence Plugin", "VS Code Extension", "API Platform"
3. Use different fill colors for different teams or categories
4. Apply Horizontal constraints to keep the bars aligned

Step 5: Add Dependencies

Draw lines between milestones or work streams to show dependencies:

1. Use the Line tool to connect dependent items
2. Add arrow styling to indicate direction
3. Label critical dependencies

Step 6: Save and Publish

1. Click Save in the DrawMotive editor modal
2. The diagram appears as a PNG image in the Confluence page
3. Publish the Confluence page

Your team can now see the roadmap on the Confluence page. To update it, click the diagram and use the pencil icon to re-open the editor.

Tips

• Use constraints to maintain alignment — when you adjust dates, everything shifts cleanly
• Color-code work streams by team or priority
• Keep the diagram focused — link to detailed pages for each milestone rather than cramming in details