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
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
This project is using Docker. To be able to run it, you need to have it installed.
- Windows: Docker Desktop
- Linux: Follow Installation Instructions
-
Clone this repository
git clone https://github.com/filipskrabak/protocol-designer.git
-
Setup
.env
file according to.env.example
-
Rename
apache.conf.example
inside thefrontend
folder toapache.conf
-
Ensure that Docker is running
-
Make sure that you are inside the project root folder
./protocol-designer
wheredocker-compose.yml
is present -
Run the project with
docker compose up --build
(this might take a while for the first time!) -
Open
http://localhost/
and register an account. -
Enjoy! For the user guide, continue to the user guide
This section explains the basics on how to use this application.
-
You need to register an account by clicking "Sign up now" on the landing page. You can use any email you want.
-
After registering, you are now free to log in with your credentials.
-
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"
-
Now you can create a protocol. Start by creating your first field (the round plus button).
-
You can set protocol properties, such as its name, in the properties tab. Don't forget to click save.
-
Now you can export your protocol by clicking the "Export" button on the top right.
-
Great! Your SVG is now downloaded. You can continue to videos below which show basic and a bit more advanced usage of this tool.
- Creating a new protocol
create.mp4
- Editing field options, resizing, removing protocol fields
fields.mp4
- Exporting a protocol to SVG
export.mp4
- Uploading an existing protocol SVG
upload.mp4
- Encapsulation showcase
enc.mp4
Documentation is available in the wiki of this repository
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.