Protocol Designer

Description

This tool allows you to visually design network protocol headers or whole protocol stacks with encapsulation. It supports export to SVG and P4. Demo of this application is available at protocol-designer.app

Features

Current list of features:

• Creating a new protocol
• Editing, resizing, removing a protocol field
• Setting possible values to a field (field options)
• Protocol properties (author, description, etc)
• Uploading a protocol SVG (with protocol definition)
• Exports
  • Export to SVG
  • Export to P4
• Encapsulation support (link your protocols)
  • Related fields and field options
  • Related fields highlighting
  • Breadcrumbs and visualization (navigate through your stack easily)
• Protocol settings
  • Bits displayed per row
  • Pixels per bit
  • Toggle scale display
  • Truncate variable length fields
• User login
• Protocol library

Getting Started

Prerequisites

This project is using Docker. To be able to run it, you need to have it installed.

• Windows: Docker Desktop
• Linux: Follow Installation Instructions

Installation

1. Clone this repository git clone https://github.com/filipskrabak/protocol-designer.git

2. Setup .env file according to .env.example

3. Rename apache.conf.example inside the frontend folder to apache.conf

4. Ensure that Docker is running

5. Make sure that you are inside the project root folder ./protocol-designer where docker-compose.yml is present

6. Run the project with docker compose up --build (this might take a while for the first time!)

7. Open http://localhost/ and register an account.

8. Enjoy! For the user guide, continue to the user guide

Usage (User Guide)

This section explains the basics on how to use this application.

1. You need to register an account by clicking "Sign up now" on the landing page. You can use any email you want.

2. After registering, you are now free to log in with your credentials.

3. After logging in, you can either create a new project, upload an existing SVG or choose a protocol from the library. Choose "Start a new project"

4. Now you can create a protocol. Start by creating your first field (the round plus button).

5. You can set protocol properties, such as its name, in the properties tab. Don't forget to click save.

6. Now you can export your protocol by clicking the "Export" button on the top right.

7. Great! Your SVG is now downloaded. You can continue to videos below which show basic and a bit more advanced usage of this tool.

Usage (videos)

1. Creating a new protocol

create.mp4

2. Editing field options, resizing, removing protocol fields

fields.mp4

3. Exporting a protocol to SVG

export.mp4

4. Uploading an existing protocol SVG

upload.mp4

5. Encapsulation showcase

enc.mp4

Documentation

Documentation is available in the wiki of this repository

Acknowledgment

This project has been supervised by Jakub Dubec, whose guidance and ideas have been extremely valuable throughout the development.

Special thanks goes to the Faculty of Informatics and Information Technologies at the Slovak University of Technology for providing hosting for this project.