{"id":17087876,"url":"https://github.com/geraintluff/sequence-diagram-html","last_synced_at":"2025-07-12T11:03:39.345Z","repository":{"id":14485623,"uuid":"17198240","full_name":"geraintluff/sequence-diagram-html","owner":"geraintluff","description":"CSS (plus convertors) for sequence diagrams","archived":false,"fork":false,"pushed_at":"2015-10-08T15:50:13.000Z","size":155,"stargazers_count":55,"open_issues_count":2,"forks_count":8,"subscribers_count":4,"default_branch":"gh-pages","last_synced_at":"2025-04-12T21:11:30.760Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://geraintluff.github.io/sequence-diagram-html/","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/geraintluff.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}},"created_at":"2014-02-26T04:01:15.000Z","updated_at":"2025-02-13T10:17:32.000Z","dependencies_parsed_at":"2022-09-16T19:23:00.179Z","dependency_job_id":null,"html_url":"https://github.com/geraintluff/sequence-diagram-html","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/geraintluff/sequence-diagram-html","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geraintluff%2Fsequence-diagram-html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geraintluff%2Fsequence-diagram-html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geraintluff%2Fsequence-diagram-html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geraintluff%2Fsequence-diagram-html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/geraintluff","download_url":"https://codeload.github.com/geraintluff/sequence-diagram-html/tar.gz/refs/heads/gh-pages","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geraintluff%2Fsequence-diagram-html/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264979766,"owners_count":23692492,"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","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":[],"created_at":"2024-10-14T13:35:14.983Z","updated_at":"2025-07-12T11:03:39.318Z","avatar_url":"https://github.com/geraintluff.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sequence Diagrams for HTML\n\nThis is a set of stylesheets for displaying sequence diagrams in HTML pages.\n\nYou can write in semantic markup ([demo page](http://geraintluff.github.io/sequence-diagram-html/example-semantic.html)) or pure CSS ([demo page](http://geraintluff.github.io/sequence-diagram-html/example-css.html)) - be sure to look at the source.\n\nTo embed in your page, you'll need [`sequence-diagram.css`](http://geraintluff.github.io/sequence-diagram-html/sequence-diagram.css), plus either the conversion script or an extra CSS file for columns.\n\n## Pure CSS (includes layout)\n\nThe underlying markup works by separating everything into columns and adding CSS classes (e.g. `col-2-4` for column 2 in a 4-column layout).  If you're doing the layout manually (pure CSS option), you'll need to include [`sequence-diagram-columns.css`](http://geraintluff.github.io/sequence-diagram-html/sequence-diagram-columns.css).\n\nHowever, you shouldn't have to write this layout code yourself, instead writing the semantic markup.\n\n## Semantic markup\n\nThe diagram can be entered in a more intuitive way (no layout concerns).  To automatically convert, include the [`convert.js`](http://geraintluff.github.io/sequence-diagram-html/convert.js) script, and place the diagram markup in a `\u003csequence-diagram-semantic\u003e` element.  You do not need the column CSS, because the conversion script generates CSS as needed.\n\nAll elements in the semantic markup can be used either directly (i.e. `\u003csequence-diagram-semantic\u003e`) or declared by the corresponding CSS class (i.e. `\u003cdiv class=\"sequence-diagram-semantic\"\u003e`).\n\n### Declaring entities\n\nEntities are declared with a `\u003cheader\u003e` element.  Each entity is an `\u003centity\u003e` element, with an optional `alias` attribute specifying how it will be referred to later.\n\n```html\n\u003csequence-diagram-semantic\u003e\n\t\u003cheader\u003e\n\t\t\u003centity\u003eAlice\u003c/entity\u003e\n\t\t\u003centity\u003eBob\u003c/entity\u003e\n\t\t\u003centity\u003eCarol\u003c/entity\u003e\n\t\t\u003centity alias=\"cat\"\u003eDani's cat\u003c/entity\u003e\n\t\u003c/header\u003e\n\t...\n\u003c/sequence-diagram-semantic\u003e\n```\n\n### Actions\n\nActions are declared with a `\u003caction\u003e` element.\n\nThe source/target of the action can be specified either with `\u003cto\u003e`/`\u003cfrom\u003e` elements, or `to`/`from` properties, depending on whether they're part of the content or not:\n\n```html\n\u003csequence-diagram-semantic\u003e\n\t\u003cheader\u003e...\u003c/header\u003e\n\t\u003caction\u003e\u003cfrom\u003eAlice\u003c/from\u003e asks \u003cto\u003eBob\u003c/to\u003e a question\u003c/action\u003e\n\t\u003caction from=\"Bob\" to=\"Alice\"\u003ereply\u003c/action\u003e\n\u003c/sequence-diagram-semantic\u003e\n```\n\n### Notes and events\n\nNotes and events are declared with `\u003cnote\u003e` or `\u003cevent\u003e` elements.\n\nAs with `\u003caction\u003e`s, `to`/`from` (attributes or elements) can be used to span the event between two entities.  However, `\u003cfor\u003e` (or the `for=` attribute) can be used to place associate the note/event with a single entity.\n\n## Conversion from text\n\nAlso included is a (fairly hacky) convertor that takes in a simple text format and outputs HTML:\n\n```\nAlice --\u003e Carol: say hello\nCarol: (notes go here)\nDani: some event\n```\n\nSee more at the [live demo](http://geraintluff.github.io/sequence-diagram-html/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeraintluff%2Fsequence-diagram-html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeraintluff%2Fsequence-diagram-html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeraintluff%2Fsequence-diagram-html/lists"}