{"id":28001153,"url":"https://github.com/sanand0/marked-smartart","last_synced_at":"2026-01-23T22:08:01.431Z","repository":{"id":284315760,"uuid":"951077080","full_name":"sanand0/marked-smartart","owner":"sanand0","description":"Smart Art / Diagrams in Marked","archived":false,"fork":false,"pushed_at":"2025-04-22T12:25:14.000Z","size":65,"stargazers_count":4,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-06T10:59:59.528Z","etag":null,"topics":["library","tool"],"latest_commit_sha":null,"homepage":"https://sanand0.github.io/marked-smartart/","language":"HTML","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/sanand0.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}},"created_at":"2025-03-19T06:01:32.000Z","updated_at":"2025-09-27T13:07:08.000Z","dependencies_parsed_at":null,"dependency_job_id":"3cad596f-38d0-4bc7-9e96-746b55ccfe8e","html_url":"https://github.com/sanand0/marked-smartart","commit_stats":null,"previous_names":["sanand0/marked-smartart"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sanand0/marked-smartart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanand0%2Fmarked-smartart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanand0%2Fmarked-smartart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanand0%2Fmarked-smartart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanand0%2Fmarked-smartart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sanand0","download_url":"https://codeload.github.com/sanand0/marked-smartart/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanand0%2Fmarked-smartart/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28700988,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-23T17:25:48.045Z","status":"ssl_error","status_checked_at":"2026-01-23T17:25:47.153Z","response_time":59,"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":["library","tool"],"created_at":"2025-05-08T23:57:40.029Z","updated_at":"2026-01-23T22:08:01.416Z","avatar_url":"https://github.com/sanand0.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Marp SmartArts\n\nA collection of custom diagram plugins for Marp presentations, including Pyramid, Chevron, and Venn diagrams. These plugins integrate seamlessly with Marp and can coexist with standard Mermaid diagrams to create beautiful, interactive diagrams in your presentations.\n\n## Project Structure\n\nThe project is organized into modular components:\n\n- `smartart-plugin.js`: Custom Marp engine that uses the unified plugin\n  - `pyramid.js`: Renders pyramid diagrams\n  - `chevron.js`: Renders chevron diagrams\n  - `venn.js`: Renders venn diagrams\n  - `utils.js`: Shared utility functions for all diagram types\n\n## Usage with Marp CLI\n\n```bash\nnpx @marp-team/marp-cli --engine ./smartart-plugin.js your-presentation.md --output your-presentation.html\n```\n\n## Diagram Types\n\n### Pyramid Diagrams\n\nCreate hierarchical structures with pyramid diagrams:\n\n````markdown\n```smartart\ntype: pyramid\nwidth: 600\nheight: 400\n\n---\n\nLeadership { color: '#1E88E5' }\nManagement { color: '#43A047', fontSize: 18 }\nTeam Leads { color: '#FDD835' }\nDevelopers { color: '#E53935', fontSize: 14 }\nSupport { color: '#757575' }\n```\n````\n\n### Chevron Diagrams\n\nCreate process flows and sequential steps with chevron diagrams:\n\n````markdown\n```smartart\ntype: chevron\nwidth: 250\nheight: 120\nfontSize: 16\n\n---\n\nAnalysis { color: '#1E88E5' }\nDesign { color: '#43A047' }\nImplementation { color: '#FDD835' }\nEvaluation { color: '#E53935' }\n```\n````\n\n### Venn Diagrams\n\nCreate relationship and intersection diagrams with Venn diagrams:\n\n````markdown\n```smartart\ntype: venn\nwidth: 650\nheight: 450\nfontSize: 18\n\n---\n\nTechnology { color: '#1976D2' }\nBusiness { color: '#388E3C' }\nUser Experience { color: '#F57C00' }\nProduct Success { fontSize: 22, color: '#D32F2F' }\n```\n````\n\n## Syntax Reference\n\n### Options\n\nEach diagram can be configured with global options specified after the type declaration:\n\n- **width**: Diagram width in pixels (default varies by type)\n- **height**: Diagram height in pixels (default varies by type)\n- **fontSize**: Base font size for text (default varies by type)\n\nExample:\n\n```smartart\ntype: pyramid\nwidth: 500\nheight: 300\nfontSize: 16\n\n---\n\nContent here...\n```\n\n### Content Format\n\nContent is defined after a `---` separator. Each line follows this pattern:\n\n```\nLabel { option1: 'value1', option2: 'value2' }\n```\n\nAvailable options:\n\n- **color**: Color code (e.g., '#4285F4')\n- **fontSize**: Custom font size for this item\n\n### Color Handling\n\nColors are handled differently per diagram type:\n\n- **Pyramid/Chevron**: Colors set the background\n- **Venn**: Colors apply to the text\n\n## Multiple Diagrams on One Slide\n\nMultiple diagrams can be placed on a single slide:\n\n````markdown\n```smartart\ntype: pyramid\nwidth: 400\nheight: 200\n\n---\n\nStrategy { color: '#4285F4' }\nTactics { color: '#34A853' }\nOperations { color: '#FBBC05' }\n```\n\n```smartart\ntype: chevron\nwidth: 180\nheight: 100\n\n---\n\nPlan { color: '#1E88E5' }\nBuild { color: '#43A047' }\nTest { color: '#FDD835' }\nDeploy { color: '#E53935' }\n```\n````\n\n## Browser Compatibility\n\nThese plugins work in all modern browsers that support SVG and foreignObject elements.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanand0%2Fmarked-smartart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsanand0%2Fmarked-smartart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanand0%2Fmarked-smartart/lists"}