Call Flow Diagram


Here is an example of the SIP3 Call Flow Diagram which allows to analyze a call as a sequence diagram. It’s the key feature of a Call Details Widget.

Call Flow Sequence Diagram

The diagram visualizes cryptic information about the call and represents it as a combination of call events between participants.


Both SIP Events and Media Events are placed in chronological order.

Keep in mind, that each Media Event stay in place on scroll between its start and finish timestamp in the call.

SIP Events

Each SIP Event has short info about its method and timestamp. If you hover a SIP Event, all sip events, that belongs to the same transaction highlights.

Call Flow Sip Events Highlighting

The more detailed info is shown on event click and looks like this:

Call Flow Sip Message

Each SIP Event timestamp is clickable and cycles through Absolute, Delta and Relative time on each mouse click.

There is another way to change timestamps settings from call flow sidebar menu, and it’s discussed later in this manual.

Media Events

Each Media Event has info about its codecs and r-factor value.

Call Flow Media Events Sticking

The Media Quality Widget is shown on event click.

Call Flow Media Message

Zoom Controls

The Call Flow interface has zoom controls. Plus and minus buttons allow zooming in and zooming out respectively.

You could control zoom level with Ctrl + scroll (with Touchpad or Mouse Wheel).
Call Flow Zoom Controls

Call Flow Sidebar

Also, the Call Flow interface has sidebar, where all main controls live.

Call Flow Sidebar Button Highlighted
Call Flow Sidebar Opened

The Call Flow sidebar has a Display settings and Time settings control.

All settings and controls are going to be placed inside the call flow sidebar. Follow us on twitter to keep up to date with latest and greatest additions to the controls of the call flow diagram.

Display Settings

The Display Settings control allow selecting different legs. It affects which legs are shown on the call flow diagram and which legs are exported as a PNG and PCAP from the Export …​ to …​ dropdown. Also, the control shows info about leg’s participants on hover.

Call Flow Sidebar Display Settings Control

Selection Logic

Action Result

Single click on any leg

Only this leg is selected.

Single click on a selected leg

Selection resets. All legs are selected.

Ctrl click on a non-selected leg

All previously selected legs and this one is selected.

Ctrl click on a selected leg

Legs is deselected. All previously selected legs, except this one is selected.

Time Settings

The Time Settings control allow changing timestamps type of all events, except the first and the last one.

Time setting Explanation

Absolute time

A timestamps displays the "real" time.

Delta time

A timestamp of any given event displays the time from previous event.

Relative time

A timestamp of any given event displays time from the first event.

Call Flow Sidebar Time Settings Control