{"id":37821625,"url":"https://github.com/filipskrabak/protocol-designer","last_synced_at":"2026-01-16T15:42:25.361Z","repository":{"id":238603571,"uuid":"750016223","full_name":"filipskrabak/protocol-designer","owner":"filipskrabak","description":"Protocol Designer allows you to design network protocols interactively.","archived":false,"fork":false,"pushed_at":"2025-11-26T09:57:35.000Z","size":464,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-11-29T03:27:34.398Z","etag":null,"topics":["design","fastapi","networking","p4language","postgresql","protocols","svg","vue","webapp"],"latest_commit_sha":null,"homepage":"https://protocol-designer.app","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/filipskrabak.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-01-29T20:36:44.000Z","updated_at":"2025-11-26T00:31:36.000Z","dependencies_parsed_at":"2024-05-17T23:32:02.704Z","dependency_job_id":"0460a3df-71cb-4f5a-99f7-da04ff0db143","html_url":"https://github.com/filipskrabak/protocol-designer","commit_stats":null,"previous_names":["filipskrabak/protocol-designer"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/filipskrabak/protocol-designer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filipskrabak%2Fprotocol-designer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filipskrabak%2Fprotocol-designer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filipskrabak%2Fprotocol-designer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filipskrabak%2Fprotocol-designer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/filipskrabak","download_url":"https://codeload.github.com/filipskrabak/protocol-designer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filipskrabak%2Fprotocol-designer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28479409,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T11:59:17.896Z","status":"ssl_error","status_checked_at":"2026-01-16T11:55:55.838Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["design","fastapi","networking","p4language","postgresql","protocols","svg","vue","webapp"],"created_at":"2026-01-16T15:42:24.550Z","updated_at":"2026-01-16T15:42:25.335Z","avatar_url":"https://github.com/filipskrabak.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Protocol Designer\n\n## Description\nThis 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](https://protocol-designer.app)\n\n![app_protocoledit(1)](https://github.com/filipskrabak/protocol-designer/assets/51746069/882aab3c-1d41-4f7f-b5b3-f85f842f40a9)\n\n## Features\n\nCurrent list of features:\n\n- [x] Creating a new protocol\n- [x] Editing, resizing, removing a protocol field\n- [x] Setting possible values to a field (field options)\n- [x] Protocol properties (author, description, etc)\n- [x] Uploading a protocol SVG (with protocol definition)\n- [x] Exports\n    - [x] Export to SVG\n    - [x] Export to P4\n    - [x] Export to Wireshark Lua dissector and colorfilters\n- [x] Encapsulation support (link your protocols)\n    - [x] Related fields and field options\n    - [x] Related fields highlighting\n    - [x] Breadcrumbs and visualization (navigate through your stack easily)\n- [x] Protocol settings\n    - [x] Bits displayed per row\n    - [x] Pixels per bit\n    - [x] Toggle scale display\n    - [x] Truncate variable length fields\n- [x] User login\n- [x] Protocol library\n\n\n## Getting Started\n\n### Prerequisites\nThis project is using Docker. To be able to run it, you need to have it installed.\n\n- Windows: [Docker Desktop](https://www.docker.com/products/docker-desktop/)\n- Linux: [Follow Installation Instructions](https://docs.docker.com/engine/install/debian/)\n\n### Installation\n1. Clone this repository\n``` git clone https://github.com/filipskrabak/protocol-designer.git ```\n\n2. Setup `.env` file according to `.env.example`\n\n3. Rename `apache.conf.example` inside the `frontend` folder to `apache.conf`\n\n4. Ensure that Docker is running\n\n5. Make sure that you are inside the project root folder `./protocol-designer` where `docker-compose.yml` is present\n\n6. Run the project with ```docker compose up --build``` (this might take a while for the first time!)\n\n7. Open `http://localhost/` and register an account. \n\n8. Enjoy! For the user guide, continue to [the user guide](#usage-user-guide)\n\n### Usage (User Guide)\n\nThis section explains the basics on how to use this application.\n\n1. You need to register an account by clicking \"Sign up now\" on the landing page. You can use any email you want.\n\n2. After registering, you are now free to log in with your credentials. \n\n3. 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\"\n\n4. Now you can create a protocol. Start by creating your first field (the round plus button). \n\n5. You can set protocol properties, such as its name, in the properties tab. Don't forget to click save.\n\n6. Now you can export your protocol by clicking the \"Export\" button on the top right.\n\n7. Great! Your SVG is now downloaded. You can continue to videos below which show basic and a bit more advanced usage of this tool.\n\n### Usage (videos)\n\n1. Creating a new protocol\n\nhttps://github.com/filipskrabak/protocol-designer/assets/51746069/c18e28d9-853f-4b57-a026-a394e7a7c62c\n\n2. Editing field options, resizing, removing protocol fields\n\nhttps://github.com/filipskrabak/protocol-designer/assets/51746069/54d31104-8862-4ba5-89f4-077c352218a0\n\n3. Exporting a protocol to SVG\n\nhttps://github.com/filipskrabak/protocol-designer/assets/51746069/24ec0fe1-7207-4b16-a80b-a4917a78ca6a\n\n4. Uploading an existing protocol SVG\n\nhttps://github.com/filipskrabak/protocol-designer/assets/51746069/e77e9ba9-d36d-4a05-9906-b695276eb8f3\n\n5. Encapsulation showcase\n\nhttps://github.com/filipskrabak/protocol-designer/assets/51746069/a3278d74-a9fa-40ec-b1e4-4083448c24d0\n\n\n## Documentation\n\nDocumentation is available in [the wiki of this repository](https://github.com/filipskrabak/protocol-designer/wiki/Technical-Documentation)\n\n## Acknowledgment\n\nThis project has been supervised by [Jakub Dubec](https://github.com/Sibyx), whose guidance and ideas have been extremely valuable throughout the development. \n\nSpecial thanks goes to the [Faculty of Informatics and Information Technologies](https://www.fiit.stuba.sk) at the Slovak University of Technology for providing hosting for this project.\n\n![fiit](https://github.com/filipskrabak/protocol-designer/assets/51746069/e824dc0b-8666-4662-853b-c7364234e823)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilipskrabak%2Fprotocol-designer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffilipskrabak%2Fprotocol-designer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilipskrabak%2Fprotocol-designer/lists"}