{"id":23459549,"url":"https://github.com/d-led/mermaidlive","last_synced_at":"2025-10-09T22:33:11.439Z","repository":{"id":241621833,"uuid":"807263713","full_name":"d-led/mermaidlive","owner":"d-led","description":"spike implementation of live updates to mermaid-js diagrams","archived":false,"fork":false,"pushed_at":"2025-09-03T20:11:29.000Z","size":1403,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-09T22:32:22.025Z","etag":null,"topics":["live-reload","live-reloading","mermaid","mermaidjs","realtime-updates"],"latest_commit_sha":null,"homepage":"https://mermaidlive.fly.dev/","language":"Go","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/d-led.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-05-28T19:08:50.000Z","updated_at":"2025-09-18T10:14:19.000Z","dependencies_parsed_at":"2024-06-14T17:22:39.184Z","dependency_job_id":"4e278642-a711-431d-a74d-20acd87a6927","html_url":"https://github.com/d-led/mermaidlive","commit_stats":null,"previous_names":["d-led/mermaidlive"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/d-led/mermaidlive","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d-led%2Fmermaidlive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d-led%2Fmermaidlive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d-led%2Fmermaidlive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d-led%2Fmermaidlive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/d-led","download_url":"https://codeload.github.com/d-led/mermaidlive/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d-led%2Fmermaidlive/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279002106,"owners_count":26083307,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"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":["live-reload","live-reloading","mermaid","mermaidjs","realtime-updates"],"created_at":"2024-12-24T06:15:38.801Z","updated_at":"2025-10-09T22:33:11.399Z","avatar_url":"https://github.com/d-led.png","language":"Go","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mermaid Diagram Live Update Demo\n\n## Running\n\n```bash\ngo run ./cmd/mermaidlive\n```\n\n\u0026darr;\n\n[http://localhost:8080/ui/](http://localhost:8080/ui/)\n\n![screencast](./docs/img/live_state.gif)\n\n- to change the default countdown delay, provide the option, e.g. `-delay 150ms`\n\n### Embedded Resources\n\nto only generate UI resources from [ui-src](./ui-src), run:\n\n```shell\ngo run ./cmd/mermaidlive -transpile\n```\n\nto build a binary with embedded UI:\n\n```shell\ngo build --tags=embed ./cmd/mermaidlive\n```\n\n## Ideas Sketched in the Spike\n\n- developer experience of live reload [back-end](./watch.go) \u0026rarr; `ResourcesRefreshed` \u0026rarr; [front-end](./ui-src/index.ts)\n- UI served from a [binary-embedded filesystem](./resources.go)\n- pub-sub [long-polling](https://ably.com/topic/long-polling) connected clients and live viewers\n- [asynchronously running state machine](./async_fsm.go) observable via published events\n- live re-rendering of a mermaid chart via events\n- initial rendering of a chart via the `LastSeenState` event published upon connecting to the stream\n- deployment on fly.io\n- sharing Gherkin features between unit, API and Browser tests, and sharing step implementations between scenarios\n- asynchronously connected client tests: two API and Browser clients\n- long poll re-connects and showing the connection status to the user\n- a persistent distributed [G-Counter (grow-only counter)](\u003chttps://en.wikipedia.org/wiki/Conflict-free_replicated_data_type#G-Counter_(Grow-only_Counter)\u003e) CRDT for started connections that is eventually-consistent, once service replicas see each other\n  - service discovery via [fly.io internal DNS](https://fly.io/docs/networking/private-networking/#fly-io-internal-dns) polling\n  - [replication](https://github.com/d-led/percounter/blob/main/zmq_single_gcounter_test.go) via a fully-connected [ZeroMQ](https://github.com/go-zeromq/zmq4) ineternal network mesh\n  - a simple persistence of the CRDT counter in a continuously re-written [JSON-structured file](https://github.com/d-led/percounter/blob/main/persistent_gcounter_test.go) located on machine-bound [fly.io volumes](https://fly.io/docs/volumes/overview/#volume-considerations)\n  - not using a separately deployed database for the CRDT\n\n## Architecture\n\n```mermaid\nflowchart LR\n    Server --serves---\u003e UI\n    StateMachine --runs on --\u003e Server\n    UI --posts commands to --\u003e Server\n    Server --forwards commands to --\u003eStateMachine\n    Server --publishes events to --\u003ePubSub\n    StateMachine --publishes events to --\u003ePubSub\n    Server --subscribes each connected client to --\u003ePubSub\n    Server --streams events to --\u003e UI\n```\n\n## Testing\n\n- the [specification](./features/) contains shared steps\n- state machine-level \"unit\" [test steps](./unit_steps_test.go)\n  - exececise the async state machine\n- API-level [test steps](./api_steps_test.go)\n  - start the server at port `8081`\n  - exercise the specification, including scenarios tagged with `@api`\n- Browser-level: [test steps](./src/steps/ui.steps.ts)\n\n### Unit\n\n```shell\ngo test -v ./...\n```\n\n### API-based\n\n- the test starts a temporary server instance and runs the tests against it\n\n```shell\n./scripts/test-api.sh\n```\n\n### Browser-based\n\n- the test uses [Playwright](https://playwright.dev/) via the [cucumber-playwright](https://github.com/Tallyb/cucumber-playwright) template\n- prerequisites:\n  - install dependencies: `npm i`\n  - initialize Playwright: `npx playwright install`\n- start the server first, e.g.:\n\n```shell\n./scripts/run-dev.sh -delay 150ms\n```\n\n- run the tests:\n\n```shell\n./scripts/test-ui.sh\n```\n\n## Approach\n\n- [Mermaid API](https://mermaid.js.org/config/setup/modules/mermaidAPI.html)\n- [JSON Streaming](https://en.wikipedia.org/wiki/JSON_streaming)\n- Identifiable concurrent processes are modeled with [phony (Go)](https://github.com/Arceliar/phony)\n- Distributing shared state from the server to client connections via [Pub/Sub](https://github.com/cskr/pubsub)\n\n## Deployment\n\n- currently deployed on [fly.io](https://fly.io/) \u0026rarr; [mermaidlive.fly.dev](https://mermaidlive.fly.dev/)\n- [docker compose](./docker-compose.yml)\n\n## Experiments\n\n### Observing Replication in Docker\n\nto start 3 initial replicas:\n\n```shell\ndocker compose up -d\n```\n\n\u0026rarr; visit and reload the UI: [http://localhost:8080/](http://localhost:8080/)\n\nstop 2 replicas:\n\n```shell\ndocker stop mermaidlive-mermaidlive-2 mermaidlive-mermaidlive-3\n```\n\n\u0026darr;\n\nlog:\n\n```log\nmermaidlive-1 | Peers changed [172.19.0.4 172.19.0.5] -\u003e []\n```\n\nreload the UI a couple of times and re-start the replicas:\n\n```shell\ndocker start mermaidlive-mermaidlive-2 mermaidlive-mermaidlive-3\n```\n\n\u0026darr;\n\nlog:\n\n```log\nmermaidlive-1 | Peers changed [] -\u003e [172.19.0.4 172.19.0.5]\nmermaidlive-1 | Connecting to tcp://[172.19.0.4]:5000\nmermaidlive-1 | Connecting to tcp://[172.19.0.5]:5000\nmermaidlive-2 | New visitor count: 25\nmermaidlive-3 | New visitor count: 25\nmermaidlive-2 | Peers changed [172.19.0.2] -\u003e [172.19.0.2 172.19.0.5]\nmermaidlive-2 | Connecting to tcp://[172.19.0.5]:5000\nmermaidlive-3 | Peers changed [172.19.0.2] -\u003e [172.19.0.2 172.19.0.4]\nmermaidlive-3 | Connecting to tcp://[172.19.0.4]:5000\n```\n\nobserve, how the replicated visitor count is propagated to the replicas.\n\nScale replicas for further experiments, e.g.:\n\n```shell\ndocker compose scale mermaidlive=5\n```\n\ncopying the replica file to the local filesystem reveals the structure of the G-Counter:\n\n```shell\ndocker compose cp mermaidlive:/appdata/my.gcounter .\n```\n\n\u0026darr;\n\n```json\n{\n  \"peers\": {\n    \"3d226c43af66\": 7,\n    \"c2206af9aba2\": 9\n  }\n}\n```\n\nwhich results in the observable counter value of `16`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd-led%2Fmermaidlive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fd-led%2Fmermaidlive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd-led%2Fmermaidlive/lists"}