{"id":19656173,"url":"https://github.com/daggerok/vuepress-diagrams","last_synced_at":"2025-10-03T23:03:35.210Z","repository":{"id":151042176,"uuid":"363459591","full_name":"daggerok/vuepress-diagrams","owner":"daggerok","description":"vuepress-theme-cool example of making diagrams using VuePress Theme Cool Starter V1","archived":false,"fork":false,"pushed_at":"2021-05-01T23:20:00.000Z","size":3995,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-10T00:41:25.004Z","etag":null,"topics":["diagram","diagrams","vuepress","vuepress-diagrams","vuepress-theme-cool"],"latest_commit_sha":null,"homepage":"https://daggerok.github.io/vuepress-diagrams/","language":"JavaScript","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/daggerok.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}},"created_at":"2021-05-01T16:44:05.000Z","updated_at":"2024-03-18T05:07:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"12e75e27-24a8-49f6-b2b1-7cb2cfaf1e05","html_url":"https://github.com/daggerok/vuepress-diagrams","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daggerok%2Fvuepress-diagrams","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daggerok%2Fvuepress-diagrams/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daggerok%2Fvuepress-diagrams/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daggerok%2Fvuepress-diagrams/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daggerok","download_url":"https://codeload.github.com/daggerok/vuepress-diagrams/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240964579,"owners_count":19885767,"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":["diagram","diagrams","vuepress","vuepress-diagrams","vuepress-theme-cool"],"created_at":"2024-11-11T15:26:52.290Z","updated_at":"2025-10-03T23:03:35.082Z","avatar_url":"https://github.com/daggerok.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"---\nhome: true\nheroText: VuePress\ntagline: Diagrams quickstart\nfooter: Made by Maksim Kostromin with ❤️ 🤘\n\n---\n\n# vuepress-diagrams [![GitHub actions](https://github.com/daggerok/vuepress-diagrams/actions/workflows/ci.yaml/badge.svg)](https://github.com/daggerok/vuepress-diagrams/actions/workflows/ci.yaml)\n\nQuick and fast rapid VuePress documentation diagrams development\n[[toc]]\n\n## Mermaid\n\n### Class diagram\n\n```scala\n\u003cmermaid\u003e\nclassDiagram\nClass01 \u003c|-- AveryLongClass : Cool\nClass03 *-- Class04\nClass05 o-- Class06\nClass07 .. Class08\nClass09 --\u003e C2 : Where am i?\nClass09 --* C3\nClass09 --|\u003e Class07\nClass07 : equals()\nClass07 : Object[] elementData\nClass01 : size()\nClass01 : int chimp\nClass01 : int gorilla\nClass08 \u003c--\u003e C2: Cool label\n\u003c/mermaid\u003e\n```\n\n\u003cmermaid\u003e\nclassDiagram\nClass01 \u003c|-- AveryLongClass : Cool\nClass03 *-- Class04\nClass05 o-- Class06\nClass07 .. Class08\nClass09 --\u003e C2 : Where am i?\nClass09 --* C3\nClass09 --|\u003e Class07\nClass07 : equals()\nClass07 : Object[] elementData\nClass01 : size()\nClass01 : int chimp\nClass01 : int gorilla\nClass08 \u003c--\u003e C2: Cool label\n\u003c/mermaid\u003e\n\n### Graph\n\n```scala\n\u003cmermaid\u003e\ngraph TD\n  A[Silvester] --\u003e|Get money| B(Go shopping)\n  B --\u003e C{Let me think}\n  C --\u003e|One| D[Laptop]\n  C --\u003e|Two| E[iPhone]\n  C --\u003e|Three| F[Car]\n  C --\u003e|Four| F[Mac]\n\u003c/mermaid\u003e\n```\n\n\u003cmermaid\u003e\ngraph TD\n  A[Silvester] --\u003e|Get money| B(Go shopping)\n  B --\u003e C{Let me think}\n  C --\u003e|One| D[Laptop]\n  C --\u003e|Two| E[iPhone]\n  C --\u003e|Three| F[Car]\n  C --\u003e|Four| F[Mac]\n\u003c/mermaid\u003e\n\n### Sequence diagram\n\n```scala\n\u003cmermaid\u003e\nsequenceDiagram\n    Alice-\u003e\u003eBob: Hello Bob, how are you?\n    alt is sick\n        Bob-\u003e\u003eAlice: Not so good :(\n    else is well\n        Bob-\u003e\u003eAlice: Feeling fresh like a daisy\n    end\n    opt Extra response\n        Bob-\u003e\u003eAlice: Thanks for asking\n    end\n\u003c/mermaid\u003e\n```\n\n\u003cmermaid\u003e\nsequenceDiagram\n    Alice-\u003e\u003eBob: Hello Bob, how are you?\n    alt is sick\n        Bob-\u003e\u003eAlice: Not so good :(\n    else is well\n        Bob-\u003e\u003eAlice: Feeling fresh like a daisy\n    end\n    opt Extra response\n        Bob-\u003e\u003eAlice: Thanks for asking\n    end\n\u003c/mermaid\u003e\n\n### Gantt diagram\n\n```scala\n\u003cmermaid\u003e\ngantt\nsection Section\nCompleted    :done,    des1, 2014-01-06, 2014-01-08\nActive       :active,  des2, 2014-01-07, 3d\nParallel 1   :         des3, after des1, 1d\nParallel 2   :         des4, after des1, 1d\nParallel 3   :         des5, after des3, 1d\nParallel 4   :         des6, after des4, 1d\n\u003c/mermaid\u003e\n```\n\n\u003cmermaid\u003e\ngantt\nsection Section\nCompleted    :done,    des1, 2014-01-06, 2014-01-08\nActive       :active,  des2, 2014-01-07, 3d\nParallel 1   :         des3, after des1, 1d\nParallel 2   :         des4, after des1, 1d\nParallel 3   :         des5, after des3, 1d\nParallel 4   :         des6, after des4, 1d\n\u003c/mermaid\u003e\n\n### Mermaid 8.4.3+ =\u003e State diagram\n\n```scala\n\u003cmermaid\u003e\nstateDiagram\n  [*] --\u003e Still\n  Still --\u003e [*]\n  Still --\u003e Moving\n  Moving --\u003e Still\n  Moving --\u003e Crash\n  Crash --\u003e [*]\n\u003c/mermaid\u003e\n```\n\n\u003cmermaid\u003e\nstateDiagram\n  [*] --\u003e Still\n  Still --\u003e [*]\n  Still --\u003e Moving\n  Moving --\u003e Still\n  Moving --\u003e Crash\n  Crash --\u003e [*]\n\u003c/mermaid\u003e\n\n## UML\n\n### PlantUml\n\n```scala\n@startuml\nBob -\u003e Alice : hello\n@enduml\n\u003cbr/\u003e\n```\n\n@startuml\nBob -\u003e Alice : hello\n@enduml\n\u003cbr/\u003e\n\n### MindMap\n\n```scala\n@startuml\n@startmindmap\n\ntitle My super title\n\n* \u003c\u0026flag\u003eDebian\n** \u003c\u0026globe\u003eUbuntu\n*** Linux Mint\n*** Kubuntu\n*** Lubuntu\n*** KDE Neon\n** \u003c\u0026graph\u003eLMDE\n** \u003c\u0026pulse\u003eSolydXK\n** \u003c\u0026people\u003eSteamOS\n** \u003c\u0026star\u003eRaspbian with a very long name\n*** \u003cs\u003eRaspmbc\u003c/s\u003e =\u003e OSMC\n*** \u003cs\u003eRaspyfi\u003c/s\u003e =\u003e Volumio\n\ncaption figure 1\n\n@endmindmap\n@enduml\n\u003cbr/\u003e\n```\n\n@startuml\n@startmindmap\n\ntitle My super title\n\n* \u003c\u0026flag\u003eDebian\n** \u003c\u0026globe\u003eUbuntu\n*** Linux Mint\n*** Kubuntu\n*** Lubuntu\n*** KDE Neon\n** \u003c\u0026graph\u003eLMDE\n** \u003c\u0026pulse\u003eSolydXK\n** \u003c\u0026people\u003eSteamOS\n** \u003c\u0026star\u003eRaspbian with a very long name\n*** \u003cs\u003eRaspmbc\u003c/s\u003e =\u003e OSMC\n*** \u003cs\u003eRaspyfi\u003c/s\u003e =\u003e Volumio\n\ncaption figure 1\n\n@endmindmap\n@enduml\n\u003cbr/\u003e\n\n### Nodes\n\n```scala\n@startuml\nnode in as \"input\"\nnode p as \"Pre-processing\"\nnode fm as \"Feature Mining\"\nnode fs as \"Feature Selection\"\nnode fr as \"Feature Reduction\"\nnode m as \"Modelling\"\nnode a as \"Accepted Results?\"\nnode pp as \"Post-processing\"\nnode o as \"Output\"\n\nin -\u003e p\np ..\u003e fm\nfm ..\u003e fs\nfs ..\u003e fr\nfr ..\u003e m\nm ..\u003e a\na ..\u003e fm : no\na -\u003e pp : yes\npp -\u003e o\n@enduml\n```\n\n@startuml\nnode in as \"input\"\nnode p as \"Pre-processing\"\nnode fm as \"Feature Mining\"\nnode fs as \"Feature Selection\"\nnode fr as \"Feature Reduction\"\nnode m as \"Modelling\"\nnode a as \"Accepted Results?\"\nnode pp as \"Post-processing\"\nnode o as \"Output\"\n\nin -\u003e p\np ..\u003e fm\nfm ..\u003e fs\nfs ..\u003e fr\nfr ..\u003e m\nm ..\u003e a\na ..\u003e fm : no\na -\u003e pp : yes\npp -\u003e o\n@enduml\n\n### Steps flow\n\n```scala\n@startuml\n  |Required Steps|\n  :\"Start Assignment\";\n  |#AntiqueWhite|Documentation|\n  :Create Git Repo/Overleaf;\n  :Copy Down Questions;\n  |#LightBlue|Git|\n  :Initial Barebones Commit;\n  |Required Steps|\n  :\"Answer Questions\";\n  :\"Submit Assignment\";\n  |Git|\n  :\"Update Local Repo\";\n  :\"Update CENG4B Notes;\n  stop\n@enduml\n```\n\n@startuml\n  |Required Steps|\n  :\"Start Assignment\";\n  |#AntiqueWhite|Documentation|\n  :Create Git Repo/Overleaf;\n  :Copy Down Questions;\n  |#LightBlue|Git|\n  :Initial Barebones Commit;\n  |Required Steps|\n  :\"Answer Questions\";\n  :\"Submit Assignment\";\n  |Git|\n  :\"Update Local Repo\";\n  :\"Update CENG4B Notes;\n  stop\n@enduml\n\n### Notes flow\n\n```scala\n@startuml\n(*) --\u003e [File System ] \"input.json \"\nnote left\n1. Read Entire File into memory\nend note\n--\u003e[Available Memory]\"JSON data loaded in memory\"\nnote left\n2. Process file\nin memory.\nend note\nnote right\nWhen loading a file into\nmemory to be parsed as\nJSON or CSV, we’re limited\nby the max string size\nin Node.js: around 536 MB\nas of Node v8\nend note\n--\u003e [File System] \"output.json\"\nnote left\n3. Write transform data back into system\nend note\n--\u003e (*)\n@enduml\n```\n\n@startuml\n(*) --\u003e [File System ] \"input.json \"\nnote left\n1. Read Entire File into memory\nend note\n--\u003e[Available Memory]\"JSON data loaded in memory\"\nnote left\n2. Process file\nin memory.\nend note\nnote right\nWhen loading a file into\nmemory to be parsed as\nJSON or CSV, we’re limited\nby the max string size\nin Node.js: around 536 MB\nas of Node v8\nend note\n--\u003e [File System] \"output.json\"\nnote left\n3. Write transform data back into system\nend note\n--\u003e (*)\n@enduml\n\n### Solidity Diagraph\n\n#### sample 1\n\n```scala\n@startuml\ndigraph foo {\n  node [style=rounded]\n  node1 [shape=box]\n  node2 [fillcolor=yellow, style=\"rounded,filled\", shape=diamond]\n  node3 [shape=record, label=\"{ a | b | c }\"]\n\n  node1 -\u003e node2 -\u003e node3\n}\n@enduml\n```\n\n@startuml\ndigraph foo {\n  node [style=rounded]\n  node1 [shape=box]\n  node2 [fillcolor=yellow, style=\"rounded,filled\", shape=diamond]\n  node3 [shape=record, label=\"{ a | b | c }\"]\n\n  node1 -\u003e node2 -\u003e node3\n}\n@enduml\n\n#### sample 2\n\n```scala\n@startuml\nstrict digraph cool {\n  exists [color=blue]\n  authenticate [color=blue]\n  require\n  create\n  UserCreated\n  destroy\n  UserDestroyed\n  get [color=blue]\n  authenticate -\u003e require\n  create -\u003e UserCreated\n  destroy -\u003e require\n  destroy -\u003e UserDestroyed\n  get -\u003e require\n}\n@enduml\n```\n\n@startuml\nstrict digraph cool {\n  exists [color=blue]\n  authenticate [color=blue]\n  require\n  create\n  UserCreated\n  destroy\n  UserDestroyed\n  get [color=blue]\n  authenticate -\u003e require\n  create -\u003e UserCreated\n  destroy -\u003e require\n  destroy -\u003e UserDestroyed\n  get -\u003e require\n}\n@enduml\n\n## Charts\n\n### Bar chart\n\n```vue\n\u003cbar-chart :data=\"[\n    ['Assignments', 10],\n    ['Midterm', 35],\n    ['Final', 55]]\"\n/\u003e\n```\n\n\u003cbar-chart :data=\"[\n    ['Assignments', 10],\n    ['Midterm', 35],\n    ['Final', 55]]\"\n/\u003e\n\n### Pie chart\n\n```vue\n\u003cpie-chart :data=\"[\n    ['Assignments', 10],\n    ['Midterm', 35],\n    ['Final', 55]]\"\n/\u003e\n```\n\n\u003cpie-chart :data=\"[\n    ['Assignments', 10],\n    ['Midterm', 35],\n    ['Final', 55]]\"\n/\u003e\n\n### Column chart\n\n```vue\n\u003ccolumn-chart :data=\"[\n    ['Assignments', 10],\n    ['Midterm', 35],\n    ['Final', 55]]\"\n/\u003e\n```\n\n\u003ccolumn-chart :data=\"[\n    ['Assignments', 10],\n    ['Midterm', 35],\n    ['Final', 55]]\"\n/\u003e\n\n_another sample_\n\n```vue\n\u003ccolumn-chart :data=\"[\n    ['Sun', 32],\n    ['Mon', 46],\n    ['Tue', 28],\n]\"/\u003e\n```\n\n\u003ccolumn-chart :data=\"[\n    ['Sun', 32],\n    ['Mon', 46],\n    ['Tue', 28],\n]\" /\u003e\n\n### Area chart\n\n```vue\n\u003carea-chart :data=\"[\n    ['Assignments', 10],\n    ['Midterm', 35],\n    ['Final', 55]\n]\" /\u003e\n```\n\n\u003carea-chart :data=\"[\n    ['Assignments', 10],\n    ['Midterm', 35],\n    ['Final', 55]\n]\" /\u003e\n\n_another sample_\n\n```vue\n\u003carea-chart :data=\"{\n    '2017-01-01': 11,\n    '2017-01-02': 6,\n    '2017-01-03': 7,\n    '2017-01-04': 8,\n    '2017-01-05': 3,\n}\" /\u003e\n```\n\n\u003carea-chart :data=\"{\n    '2017-01-01': 11,\n    '2017-01-02': 6,\n    '2017-01-03': 7,\n    '2017-01-04': 8,\n    '2017-01-05': 3,\n}\" /\u003e\n\n### Scatter chart\n\n```vue\n\u003cscatter-chart\n    xtitle=\"Size\"\n    ytitle=\"Population\"\n    :data=\"[\n        [175.0, 80.0],\n        [175.3, 60.1],\n        [175.5, 55.2],\n        [175.8, 42.4],\n        [176.0, 38.3],\n    ]\"\n/\u003e\n```\n\n\u003cscatter-chart\n    xtitle=\"Size\"\n    ytitle=\"Population\"\n    :data=\"[\n        [175.0, 80.0],\n        [175.3, 60.1],\n        [175.5, 55.2],\n        [175.8, 42.4],\n        [176.0, 38.3],\n    ]\"\n/\u003e\n\n### Line chart\n\n```vue\n\u003cline-chart :data=\"[\n    { name: 'Workout',      data: { '2017-01-01': 3, '2017-01-02': 4 } },\n    { name: 'Call parents', data: { '2017-01-01': 5, '2017-01-02': 3 } },\n]\" /\u003e\n```\n\n\u003cline-chart :data=\"[\n    { name: 'Workout',      data: { '2017-01-01': 3, '2017-01-02': 4 } },\n    { name: 'Call parents', data: { '2017-01-01': 5, '2017-01-02': 3 } },\n]\" /\u003e\n\n## Math\n\n```scala\n$x^2 + x_2 = x_2 + x^2$\n```\n\n$x^2 + x_2 = x_2 + x^2$\n\n_yet another sample_\n\n```scala\n$$x^2 + x = x + x^2$$\n```\n\n$$x^2 + x = x + x^2$$\n\n## Quickstart new project\n\nStart from documentation:\n\n```bash\nmkdir /tmp/1 \u0026\u0026 wget -qO- https://github.com/daggerok/vuepress-diagrams/archive/master.zip | tar xvf - -C $_\n# wget -qO- https://github.com/daggerok/vuepress-diagrams/archive/master.zip | tar xvf -\n# tar -xvf \u003c(curl -sL https://github.com/daggerok/vuepress-diagrams/archive/master.zip)\n# jar -xvf \u003c(curl -sL https://github.com/daggerok/vuepress-diagrams/archive/master.zip)\nmv /tmp/1/vuepress-diagrams-master /tmp/my-new-project\ncd /tmp/my-new-project/\n# find and replace: vuepress-diagrams -\u003e my-new-project\n# such as: BASE='/my-new-project/'\nvi package.json\nvi .vuepress/config.js\n```\n\n## Build and serve\n\n```sh\nnpm i -E ; npm run build ; npx serve .vuepress/dist/\n```\n\nopen [http://localhost:8080/](http://localhost:8080/) url\n\n## Publish via CI\n\nCheckout `.github/workflows/ci.yaml` file to see how easily you can deploy your VuePress docs on GitHub Pages:\n\n@[code transcludeWith=::include lang=yaml](@/.github/workflows/ci.yaml)\n\nThat README.md documentation file is compiled and deployed on [GitHub Pages](https://daggerok.github.io/vuepress-diagrams/)\n\n## rtfm\n* https://friendlyuser.github.io/vuepress-theme-cool-starter\n* https://github.com/mermaid-js/mermaid\n* https://github.com/KaTeX/KaTeX\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaggerok%2Fvuepress-diagrams","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaggerok%2Fvuepress-diagrams","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaggerok%2Fvuepress-diagrams/lists"}