{"id":45894617,"url":"https://github.com/frankdugan3/mdex_mermex","last_synced_at":"2026-03-02T23:00:59.419Z","repository":{"id":340444898,"uuid":"1166034002","full_name":"frankdugan3/mdex_mermex","owner":"frankdugan3","description":"An MDex plugin rendering Mermaid charts inline via Mermex","archived":false,"fork":false,"pushed_at":"2026-02-24T21:34:58.000Z","size":13,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-25T01:41:37.421Z","etag":null,"topics":["elixir","markdown","mdex","mermaid"],"latest_commit_sha":null,"homepage":"","language":"Elixir","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/frankdugan3.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2026-02-24T20:08:38.000Z","updated_at":"2026-02-24T22:40:47.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/frankdugan3/mdex_mermex","commit_stats":null,"previous_names":["frankdugan3/mdex_mermex"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/frankdugan3/mdex_mermex","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frankdugan3%2Fmdex_mermex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frankdugan3%2Fmdex_mermex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frankdugan3%2Fmdex_mermex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frankdugan3%2Fmdex_mermex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/frankdugan3","download_url":"https://codeload.github.com/frankdugan3/mdex_mermex/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frankdugan3%2Fmdex_mermex/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29843022,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-25T21:18:31.832Z","status":"ssl_error","status_checked_at":"2026-02-25T21:18:29.265Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":["elixir","markdown","mdex","mermaid"],"created_at":"2026-02-27T20:01:51.528Z","updated_at":"2026-02-27T20:01:52.244Z","avatar_url":"https://github.com/frankdugan3.png","language":"Elixir","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MDExMermex\n\n[![Hex.pm](https://img.shields.io/hexpm/v/mdex_mermex.svg)](https://hex.pm/packages/mdex_mermex)\n[![Hexdocs.pm](https://img.shields.io/badge/docs-hexdocs-blue.svg)](https://hexdocs.pm/mdex_mermex)\n[![License: MIT](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE)\n\nAn [MDEx](https://hexdocs.pm/mdex) plugin that renders Mermaid diagrams server-side using [Mermex](https://hexdocs.pm/mermex) (Rust NIF). Each diagram is wrapped in an interactive container with zoom, pan, and fullscreen controls.\n\n## Installation\n\nAdd `mdex_mermex` to your list of dependencies in `mix.exs`:\n\n```elixir\ndef deps do\n  [\n    {:mdex_mermex, \"~\u003e 0.1.0\"}\n  ]\nend\n```\n\nThen run:\n\n```sh\nmix deps.get\n```\n\n## Usage\n\nPass `MDExMermex` as a plugin to `MDEx.to_html!/2`:\n\n````elixir\nmarkdown = \"\"\"\n```mermaid\nflowchart LR\n  A--\u003eB--\u003eC\n```\n\"\"\"\n\nMDEx.to_html!(markdown, plugins: [MDExMermex])\n````\n\nThis renders the Mermaid diagram server-side and outputs an interactive HTML container with the SVG inline. CSS and JS are injected once per document by default.\n\n## Options\n\n| Option        | Default       | Description                                                     |\n| ------------- | ------------- | --------------------------------------------------------------- |\n| `:output`     | `:inline_svg` | `:inline_svg` for raw SVG, `:img_base64` for base64 `\u003cimg\u003e` tag |\n| `:class`      | `nil`         | Additional CSS class(es) appended to the wrapper `\u003cdiv\u003e`        |\n| `:inject_css` | `true`        | Set to `false` to skip per-document `\u003cstyle\u003e` injection         |\n| `:inject_js`  | `true`        | Set to `false` to skip per-document `\u003cscript\u003e` injection        |\n| `:css_layer`  | `nil`         | Wraps injected CSS in a `@layer` rule (e.g. `\"components\"`)     |\n\n```elixir\n# Base64 image output\nMDEx.to_html!(markdown, plugins: [{MDExMermex, output: :img_base64}])\n\n# Custom CSS class — produces: \u003cdiv class=\"mdex-mermex my-diagram\" tabindex=\"0\"\u003e\nMDEx.to_html!(markdown, plugins: [{MDExMermex, class: \"my-diagram\"}])\n\n# Wrap injected CSS in a cascade layer\nMDEx.to_html!(markdown, plugins: [{MDExMermex, css_layer: \"components\"}])\n```\n\n## Including Assets Manually\n\nWhen injection is disabled (e.g. for Phoenix LiveView where inline `\u003cscript\u003e` tags won't execute via DOM patches), import the assets directly from the package:\n\n- **CSS** — `assets/mdex_mermex.css`\n- **JS** — `assets/mdex_mermex.js`\n\n```elixir\nMDEx.to_html!(markdown, plugins: [{MDExMermex, inject_css: false, inject_js: false}])\n```\n\nThe JS uses a `MutationObserver` to automatically initialize diagrams added to the DOM after page load, making it compatible with LiveView and other frameworks that patch the DOM.\n\n## Features\n\n- **Server-side rendering** — Mermaid diagrams are rendered at compile/build time via a Rust NIF, no client-side JavaScript Mermaid library needed\n- **Zoom \u0026 pan** — scroll to zoom toward cursor, click-and-drag to pan, double-click to reset\n- **Toolbar** — hover to reveal zoom in/out, reset, and fullscreen buttons\n- **Fullscreen** — expand any diagram to fill the screen via the Fullscreen API\n- **LiveView compatible** — `MutationObserver` initializes diagrams on DOM patches; `data-mdex-init` prevents double binding\n- **Flexible asset injection** — CSS and JS injected per-document by default, or import manually from the package's `assets/` directory\n\n## License\n\nMIT — see [LICENSE](LICENSE) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrankdugan3%2Fmdex_mermex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrankdugan3%2Fmdex_mermex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrankdugan3%2Fmdex_mermex/lists"}