{"id":50342933,"url":"https://github.com/bythebug/lld-viz","last_synced_at":"2026-05-29T18:01:36.531Z","repository":{"id":355265450,"uuid":"1227421605","full_name":"bythebug/lld-viz","owner":"bythebug","description":"Live Python-to-UML class diagram visualizer for LLD interview prep. Type Python, see the diagram update in real time.","archived":false,"fork":false,"pushed_at":"2026-05-02T17:14:00.000Z","size":26,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-02T19:13:46.328Z","etag":null,"topics":["design-patterns","interview-prep","lld","python","system-design","uml","visualization"],"latest_commit_sha":null,"homepage":"https://bythebug.github.io/lld-viz","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bythebug.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2026-05-02T16:57:22.000Z","updated_at":"2026-05-02T17:14:04.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/bythebug/lld-viz","commit_stats":null,"previous_names":["bythebug/lld-viz"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/bythebug/lld-viz","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bythebug%2Flld-viz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bythebug%2Flld-viz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bythebug%2Flld-viz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bythebug%2Flld-viz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bythebug","download_url":"https://codeload.github.com/bythebug/lld-viz/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bythebug%2Flld-viz/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33664259,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-29T02:00:06.066Z","response_time":107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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-patterns","interview-prep","lld","python","system-design","uml","visualization"],"created_at":"2026-05-29T18:01:35.145Z","updated_at":"2026-05-29T18:01:36.516Z","avatar_url":"https://github.com/bythebug.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# LLD Viz\n\nA live, browser-based UML class diagram visualizer for practicing **Low-Level Design (LLD)** in Python — built for interview prep.\n\nType Python code on the left, watch the class diagram update on the right in real time.\n\n**[Try it live → bythebug.github.io/lld-viz](https://bythebug.github.io/lld-viz)**\n\n---\n\n## Features\n\n- **Live rendering** — diagram updates ~400ms after you stop typing, no button needed\n- **UML class diagrams** — classes, inheritance, composition, and dependency arrows\n- **Color-coded at a glance**\n  - Periwinkle = Abstract classes / Interfaces\n  - Banana Cream = Pattern-tagged classes\n  - Light Yellow = Concrete classes\n  - Method text in Glaucous blue, attribute text in Tomato red\n- **Design pattern detection** — automatically detects and badges Singleton, Observer, Subject, Strategy, Factory, Decorator, Command, Builder, Facade\n- **Access modifiers** — `+` public, `#` protected (`_prefix`), `-` private (`__prefix`), `*` abstract, `$` static\n- **7 preloaded examples** — Singleton, Observer, Strategy, Factory Method, Decorator, Builder, Command\n- **Download** — export diagram as SVG or download Python + SVG together as a ZIP\n- **Zoom** — `+` / `−` buttons, fit, or `Ctrl+scroll` on the diagram\n- **Keyboard shortcut** — `Cmd/Ctrl + Enter` to force a refresh\n- **Draggable split** — resize editor vs diagram panes\n\n## What it detects\n\n```python\nfrom abc import ABC, abstractmethod\nfrom typing import List\n\nclass Animal(ABC):\n    def __init__(self, name: str, age: int):\n        self.name: str = name   # → attribute (typed)\n        self.age: int = age\n\n    @abstractmethod\n    def make_sound(self) -\u003e str:  # → abstract method\n        pass\n\nclass Dog(Animal):              # → inheritance arrow\n    def __init__(self, name: str, age: int, breed: str):\n        super().__init__(name, age)\n        self.breed: str = breed\n\n    def make_sound(self) -\u003e str:\n        return \"Woof!\"\n\nclass Shelter:\n    def __init__(self):\n        self.animals: List[Animal] = []  # → composition arrow\n\n    def add_animal(self, animal: Animal) -\u003e None:\n        self.animals.append(animal)\n```\n\n## Supported patterns\n\n| Pattern | Detection signals |\n|---|---|\n| Singleton | `_instance` class attr + `get_instance` / `__new__` method |\n| Observer | list of observers attr + `notify` + `attach`/`detach` |\n| Subject | same as Observer (the publisher side) |\n| Strategy | abstract class with single abstract `execute`/`run`/`sort`/etc. method |\n| Factory | abstract class with abstract `create_*` / `make_*` method |\n| Decorator | inherits from X AND stores a reference of type X |\n| Command | has both `execute` and `undo` methods |\n| Builder | multiple `set_*`/`with_*` methods + `build` method |\n| Facade | composes 3+ classes, few public methods |\n\n## Usage\n\nNo install needed. Open `index.html` in your browser — or visit the live site.\n\nTo run locally:\n```bash\ngit clone https://github.com/bythebug/lld-viz\ncd lld-viz\npython3 -m http.server 8080\n# open http://localhost:8080\n```\n\n## Tech stack\n\n- [CodeMirror 5](https://codemirror.net/) — Python editor with syntax highlighting\n- [Mermaid.js](https://mermaid.js.org/) — UML class diagram rendering\n- [JSZip](https://stuk.github.io/jszip/) — ZIP download\n- Pure HTML / CSS / JS — no build step, no framework\n\n## Built by\n\n[bythebug](https://bythebug.github.io) (Suraj Verma)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbythebug%2Flld-viz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbythebug%2Flld-viz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbythebug%2Flld-viz/lists"}