{"id":384689,"date":"2024-06-29T05:39:38","date_gmt":"2024-06-29T05:39:38","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=384689"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=384689","title":{"rendered":"<span>\u0420\u0438\u0441\u0443\u0435\u043c \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b Mermaid.js \u0432 README-\u0444\u0430\u0439\u043b\u0430\u0445 GitHub<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>14 \u0444\u0435\u0432\u0440\u0430\u043b\u044f 2022 \u0433\u043e\u0434\u0430 GitHub <a href=\"https:\/\/habr.com\/ru\/news\/t\/651569\/\" rel=\"noopener noreferrer nofollow\">\u043e\u0431\u044a\u044f\u0432\u0438\u043b\u0430<\/a> \u043e \u0441\u0442\u0430\u0440\u0442\u0435 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c Mermaid.js \u0432 README-\u0444\u0430\u0439\u043b\u0430\u0445 GitHub. \u041d\u043e\u0432\u043e\u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u043e\u043c\u043e\u0433\u043b\u043e \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0435\u0435 \u043e\u0444\u043e\u0440\u043c\u043b\u044f\u0442\u044c \u0431\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u044b \u0438 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0434\u043b\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438. \u0414\u043e \u044d\u0442\u043e\u0433\u043e \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u043b\u0438\u0441\u044c \u0432 \u0432\u0438\u0434\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u0435\u0441\u043b\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c, \u0442\u043e \u043d\u0430\u0434\u043e \u0431\u044b\u043b\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u0430 \u043f\u043e\u0442\u043e\u043c \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0435\u0433\u043e. \u0421\u0435\u0439\u0447\u0430\u0441 \u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a \u0432 \u043a\u043e\u0434\u0435 \u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u0433\u0440\u0430\u0444\u0438\u043a.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/2ba\/482\/cc3\/2ba482cc3db2b51880089292308ded22.jpg\" width=\"1280\" height=\"720\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2ba\/482\/cc3\/2ba482cc3db2b51880089292308ded22.jpg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e GitHub, Mermaid.js \u043d\u0430\u0442\u0438\u0432\u043d\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u0432 GitLab, Gitea, Joplin \u0438 Notion. \u0422\u0430\u043a\u0436\u0435 \u0435\u0441\u0442\u044c \u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0434\u043b\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432. \u0414\u043b\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u043e\u0432 \u043a\u043e\u0434\u0430 \u0435\u0441\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b. \u0421 \u043f\u043e\u043b\u043d\u044b\u043c \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0432 <a href=\"https:\/\/github.com\/mermaid-js\/mermaid\/blob\/develop\/docs\/integrations.md\" rel=\"noopener noreferrer nofollow\">GitHub-\u043f\u0440\u043e\u0444\u0438\u043b\u0435<\/a> \u043f\u0440\u043e\u0435\u043a\u0442\u0430.\u00a0<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432\u0441\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b, \u0438\u043c\u0435\u044e\u0449\u0438\u0435\u0441\u044f \u0432 Mermaid \u0438 \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043c\u0441\u044f \u0441\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u043b\u043e\u043a-\u0441\u0445\u0435\u043c \u0432 README-\u0444\u0430\u0439\u043b\u0430\u0445.<\/p>\n<p>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435:<\/p>\n<ol>\n<li>\n<p><a href=\"#flowchart\" rel=\"noopener noreferrer nofollow\">\u0411\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u0430<\/a>;<\/p>\n<\/li>\n<li>\n<p><a href=\"#pie\" rel=\"noopener noreferrer nofollow\">\u041a\u0440\u0443\u0433\u043e\u0432\u044b\u0435 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b<\/a>;<\/p>\n<\/li>\n<li>\n<p><a href=\"#journey\" rel=\"noopener noreferrer nofollow\">\u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043f\u0443\u0442\u0438<\/a>;<\/p>\n<\/li>\n<li>\n<p><a href=\"#gantt\" rel=\"noopener noreferrer nofollow\">\u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u0413\u0430\u043d\u0442\u0430<\/a>;<\/p>\n<\/li>\n<li>\n<p><a href=\"#uml\" rel=\"noopener noreferrer nofollow\">UML-\u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430<\/a>;<\/p>\n<\/li>\n<li>\n<p><a href=\"#stateDiagram\" rel=\"noopener noreferrer nofollow\">\u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/a>;<\/p>\n<\/li>\n<li>\n<p><a href=\"#er\" rel=\"noopener noreferrer nofollow\">ER-\u043c\u043e\u0434\u0435\u043b\u044c<\/a>;<\/p>\n<\/li>\n<li>\n<p><a href=\"#sequenceDiagram\" rel=\"noopener noreferrer nofollow\">\u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/a>.<\/p>\n<\/li>\n<\/ol>\n<h2>\u0411\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u0430<\/h2>\n<p><a class=\"anchor\" name=\"flowchart\" id=\"flowchart\"><\/a><\/p>\n<p>\u0411\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u044b \u2014 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0439 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438. \u0427\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432. \u0411\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u044b \u043e\u0431\u044b\u0447\u043d\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 \u0443\u0437\u043b\u043e\u0432 \u0432 \u0432\u0438\u0434\u0435 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0444\u0438\u0433\u0443\u0440 \u0438 \u0441\u0442\u0440\u0435\u043b\u043e\u043a, \u0441\u043e\u0435\u0434\u0438\u043d\u044f\u044e\u0449\u0438\u0445 \u0443\u0437\u043b\u044b. Mermaid \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0431\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u044b.\u00a0<\/p>\n<p>\u0411\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 <code>flowchart<\/code> \u0438 \u0430\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0434\u043b\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u0418\u043c\u044f \u0443\u0437\u043b\u0430 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0443\u0436\u0435 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u0435. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u0430\u0436\u043d\u043e, \u0447\u0442\u043e \u043d\u0435\u043b\u044c\u0437\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0443\u0437\u0435\u043b \u0441 \u0438\u043c\u0435\u043d\u0435\u043c \u00abend\u00bb, \u0435\u0441\u043b\u0438 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0447\u0435\u0442\u0441\u044f, \u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u00abEnd\u00bb \u0438\u043b\u0438 \u00abEND\u00bb.<\/p>\n<pre><code>flowchart TB node<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/26d\/942\/10a\/26d94210aa7e90b8f5f9289830eb072a.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/26d\/942\/10a\/26d94210aa7e90b8f5f9289830eb072a.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0431\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u044b, \u043a\u0430\u043a \u0443\u0436\u0435 \u0431\u044b\u043b\u043e \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u043e, \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0439 \u0430\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440\u044b. \u0412\u0441\u0435\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e 5 \u0430\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440:<\/p>\n<ul>\n<li>\n<p>TB \u2014 \u00abtop to bottom\u00bb, \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437;<\/p>\n<\/li>\n<li>\n<p>TD \u2014 \u00abtop-down\/ same as top to bottom\u00bb, \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437;<\/p>\n<\/li>\n<li>\n<p>BT \u2014 \u00abbottom to top\u00bb, \u0441\u043d\u0438\u0437\u0443 \u0432\u0432\u0435\u0440\u0445;<\/p>\n<\/li>\n<li>\n<p>RL \u2014 \u00abright to left\u00bb, \u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u043b\u0435\u0432\u043e;<\/p>\n<\/li>\n<li>\n<p>LR \u2014 \u00ableft to right\u00bb, \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u0443\u0437\u0435\u043b \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0442\u0435\u043a\u0441\u0442, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0441\u043b\u0435 \u0438\u043c\u0435\u043d\u0438 \u043d\u0430\u0434\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u0432 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0445 \u0441\u043a\u043e\u0431\u043a\u0430\u0445.<\/p>\n<pre><code>flowchart TB   node[\u0422\u0435\u043a\u0441\u0442 \u0432 \u0443\u0437\u043b\u0435]<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a85\/2cc\/ce3\/a852ccce36cd404c6dcf8a11367294fc.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a85\/2cc\/ce3\/a852ccce36cd404c6dcf8a11367294fc.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0421\u0430\u043c\u0438 \u0443\u0437\u043b\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u044b\u043c\u0438. \u0424\u043e\u0440\u043c\u0430 \u0443\u0437\u043b\u0430 \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0441\u0438\u043c\u0432\u043e\u043b\u0430\u043c\u0438 \u0432\u043e\u043a\u0440\u0443\u0433 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0438\u0433\u0443\u0440\u044b:<\/p>\n<pre><code>flowchart TB   node1[\u0424\u043e\u0440\u043c\u0430 1]     node2(\u0424\u043e\u0440\u043c\u0430 2)   node3([\u0424\u043e\u0440\u043c\u0430 3])   node4[[\u0424\u043e\u0440\u043c\u0430 4]]   node5[(\u0424\u043e\u0440\u043c\u0430 5)]   node6((\u0424\u043e\u0440\u043c\u0430 6))   node7>\u0424\u043e\u0440\u043c\u0430 7]   node8{\u0424\u043e\u0440\u043c\u0430 8}   node9{{\u0424\u043e\u0440\u043c\u0430 9}}   node10[\/\u0424\u043e\u0440\u043c\u0430 10\/]   node11[\\\u0424\u043e\u0440\u043c\u0430 11\\]   node12[\/\u0424\u043e\u0440\u043c\u0430 12\\]   node13[\\\u0424\u043e\u0440\u043c\u0430 13\/]<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ea6\/741\/a3b\/ea6741a3b6d41c1e404519986e229c11.png\" width=\"1280\" height=\"720\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ea6\/741\/a3b\/ea6741a3b6d41c1e404519986e229c11.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0418\u043d\u043e\u0433\u0434\u0430 \u0432 \u0441\u0430\u043c\u043e\u043c \u0442\u0435\u043a\u0441\u0442\u0435 \u043d\u0430\u0434\u043e \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043c\u043e\u0433\u0443\u0442 \u0441\u043b\u043e\u043c\u0430\u0442\u044c \u0432\u0441\u044e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e. \u0414\u043b\u044f \u044d\u0442\u0438\u0445 \u0446\u0435\u043b\u0435\u0439 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u044d\u043a\u0440\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 \u0432\u0438\u0434\u0435 \u043a\u0430\u0432\u044b\u0447\u0435\u043a. \u0412\u0441\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0432 \u043a\u0430\u0432\u044b\u0447\u043a\u0430\u0445 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0437\u0430 \u0442\u0435\u043a\u0441\u0442. <\/p>\n<pre><code>flowchart LR     id1[\"\u042d\u0442\u043e \u0442\u0435\u043a\u0441\u0442 (\u0430 \u0432\u043e\u0442 \u044d\u0442\u043e \u043c\u043e\u0433\u043b\u043e \u0441\u043b\u043e\u043c\u0430\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433), \u043d\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u044d\u043a\u0440\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\"]<\/code><\/pre>\n<p>\u0423\u0437\u043b\u044b \u0432 \u0431\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u0435 \u0441\u043e\u0435\u0434\u0438\u043d\u044f\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0440\u0435\u043b\u043e\u043a \u0438 \u043b\u0438\u043d\u0438\u0439. \u0412 \u043a\u043e\u0434\u0435 \u043e\u043d\u0438 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code>flowchart TB \u0410 --> B C --- D E -.-> F G ==> H I --o J K --x L<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/67f\/3a2\/5f2\/67f3a25f262395e7a281af15be962580.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/67f\/3a2\/5f2\/67f3a25f262395e7a281af15be962580.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0422\u0430\u043a \u0436\u0435 \u043a\u0430\u043a \u0438 \u0432 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u0431\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u0435, \u0432 Mermaid \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441 \u0438\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u043d\u0430 \u0441\u0442\u0440\u0435\u043b\u043a\u0430\u0445 \u0438 \u0441\u0432\u044f\u0437\u044f\u0445 \u0443\u0437\u043b\u043e\u0432. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0432\u0432\u0435\u0441\u0442\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u0441\u0442\u0440\u0435\u043b\u043a\u0438:<\/p>\n<pre><code>flowchart TD     A-- Text ---B     C---|Text|D      E-->|text|F      G-- text -->H      I-. text .-> J      K == text ==> L<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f57\/48d\/570\/f5748d5702fab6252b485389fb850441.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f57\/48d\/570\/f5748d5702fab6252b485389fb850441.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434\u0431\u0438\u0440\u0430\u0435\u0442 \u0434\u043b\u0438\u043d\u0443 \u0441\u0442\u0440\u0435\u043b\u043e\u043a \u0438 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0439, \u043d\u043e \u0435\u0441\u043b\u0438 \u043d\u0430\u0434\u043e \u044f\u0432\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0434\u043b\u0438\u043d\u0443, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0434\u0435\u0444\u0438\u0441\u043e\u0432.<\/p>\n<p>\u0417\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0431\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0434\u0432\u0443\u0445 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432. \u0414\u043b\u044f \u044d\u0442\u0438\u0445 \u0446\u0435\u043b\u0435\u0439 \u043f\u043e\u0434\u043e\u0439\u0434\u0443\u0442 \u043f\u043e\u0434\u0441\u0445\u0435\u043c\u044b, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439 \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0440\u0438\u0441\u0443\u043d\u043a\u0435. \u0417\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u043e\u043d\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0435\u0439:<\/p>\n<pre><code>subgraph \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435     \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0433\u0440\u0430\u0444\u0430 end<\/code><\/pre>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code>flowchart TB     c1-->a2     subgraph one     a1-->a2     end     subgraph two     b1-->b2     end     subgraph three     c1-->c2     end<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f69\/3f8\/009\/f693f8009adfeffb0172dc8657337091.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f69\/3f8\/009\/f693f8009adfeffb0172dc8657337091.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0423\u0437\u0435\u043b \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u043e\u0439, \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0434\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443 \u0432 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u0443\u0437\u043b\u0430. \u0421\u0441\u044b\u043b\u043a\u0443 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u044d\u043a\u0440\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0432\u044b\u0447\u043a\u0430\u043c\u0438:<\/p>\n<pre><code>flowchart TB %% \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0443\u0437\u0435\u043b     A --> B  %% \u041a\u0441\u0442\u0430\u0442\u0438 \u0434\u0430, \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0434\u0432\u0443\u043c\u044f \u0437\u043d\u0430\u043a\u0430\u043c\u0438 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430 %% \u041e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0434\u043b\u044f \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u0443\u0437\u043b\u0443  click A \"http:\/\/www.github.com\"<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0443\u0437\u0435\u043b A \u0441\u0442\u0430\u043d\u0435\u0442 \u043a\u043b\u0438\u043a\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u043c \u0438 \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0430\u044f\u0441\u044f \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435. \u041d\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u0441\u044b\u043b\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0432 \u043a\u043e\u043d\u0446\u0435 \u0441\u0441\u044b\u043b\u043a\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e <code>_blank<\/code>.<\/p>\n<pre><code>flowchart TB     A --> B      click A \"http:\/\/www.github.com\" _blank<\/code><\/pre>\n<p>\u0423\u0437\u043b\u0430\u043c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0432\u0437\u044f\u0442\u043e\u0433\u043e \u0443\u0437\u043b\u0430 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0446\u0432\u0435\u0442. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0441\u043b\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0431\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e <code>style<\/code>, \u043f\u043e\u0441\u043b\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0438\u043c\u044f \u0443\u0437\u043b\u0430, \u0430 \u043f\u043e\u0442\u043e\u043c \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0446\u0432\u0435\u0442\u043e\u0432\u0443\u044e \u0441\u0445\u0435\u043c\u0443. \u0426\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u0441\u0445\u0435\u043c\u0430 \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0442\u0435\u0433\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>fill \u2014 \u0437\u0430\u043b\u0438\u0432\u043a\u0430;<\/p>\n<\/li>\n<li>\n<p>stroke \u2014 \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b;<\/p>\n<\/li>\n<li>\n<p>stroke-width \u2014 \u0442\u043e\u043b\u0449\u0438\u043d\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b;<\/p>\n<\/li>\n<li>\n<p>color \u2014 \u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430;<\/p>\n<\/li>\n<li>\n<p>stroke-dasharray \u2014 \u043f\u0443\u043d\u043a\u0442\u0438\u0440\u043d\u0430\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430.<\/p>\n<\/li>\n<\/ul>\n<pre><code>flowchart LR     id1(Start)-->id2(Stop)     style id1 fill:#3f3,stroke:#333,stroke-width:4px     style id2 fill:#ff2400,stroke:#333,stroke-width:4px,color:#fff,stroke-dasharray: 12 5<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/51e\/558\/64a\/51e55864a8625bfc418cca14c7e52916.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/51e\/558\/64a\/51e55864a8625bfc418cca14c7e52916.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0415\u0441\u043b\u0438 \u0431\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u0430 \u0431\u043e\u043b\u044c\u0448\u0430\u044f, \u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0440\u0430\u0441\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0438\u0445. \u041a\u043b\u0430\u0441\u0441 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 <code>classDef<\/code>, \u0434\u0430\u043b\u0435\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 \u0438 \u0442\u0435\u0433\u0438 \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u043f\u044f\u0442\u0443\u044e. \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0442\u0438\u043b\u044c \u043c\u043e\u0436\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0440\u0435\u0445 \u0434\u0432\u043e\u0435\u0442\u043e\u0447\u0438\u0439 \u043f\u043e\u0441\u043b\u0435 \u0438\u043c\u0435\u043d\u0438 \u0443\u0437\u043b\u0430 (<code>:::<\/code>).<\/p>\n<pre><code>flowchart LR     classDef class1 fill:#3f3,stroke:#333,stroke-width:4px     classDef class2 fill:#ff2400,stroke:#333,stroke-width:4px,color:#fff,stroke-dasharray: 12 5          A:::class1 --> B:::class2<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b48\/ac4\/680\/b48ac4680ec93c4f36df6c5d66721768.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b48\/ac4\/680\/b48ac4680ec93c4f36df6c5d66721768.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0432\u0441\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u043e\u0442 \u0442\u0430\u043a\u0443\u044e \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u0443\u044e \u0431\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u0443.<\/p>\n<pre><code>flowchart TD     classDef class1 fill:#7FFFD4, stroke:#000, stroke-width:4px      A([\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430]):::class1     B{\u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f?}:::class1     A--->B     B--\u0414\u0430-->C([\u041b\u0443\u0447\u0448\u0435 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f Mermaid.js]):::class1      B--\u041d\u0435\u0442-->D([\u041c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0438 \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Markdown]):::class1<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c19\/ac8\/112\/c19ac81127c2fb7d0f567727fca730be.png\" width=\"1280\" height=\"720\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c19\/ac8\/112\/c19ac81127c2fb7d0f567727fca730be.png\"\/><figcaption><\/figcaption><\/figure>\n<h2>\u041a\u0440\u0443\u0433\u043e\u0432\u044b\u0435 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b<\/h2>\n<p><a class=\"anchor\" name=\"pie\" id=\"pie\"><\/a><\/p>\n<p>\u041a\u0440\u0443\u0433\u043e\u0432\u0430\u044f \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u2014 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u0430\u043a\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043e\u0442 \u043e\u0431\u0449\u0435\u0433\u043e \u0447\u0438\u0441\u043b\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438. \u0412 Mermaid \u043a\u0440\u0443\u0433\u043e\u0432\u044b\u0435 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 <code>pie<\/code>, \u0434\u0430\u043b\u0435\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0441\u043b\u043e\u0432\u043e <code>title<\/code>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u0435 \u0437\u0430\u0434\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u0438 \u0441\u0442\u0440\u043e\u043a\u0430 \u0441 \u0441\u0430\u043c\u0438\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c. \u041d\u043e titlte \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0438 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0442\u043e\u0433\u0434\u0430 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u0431\u0443\u0434\u0435\u0442 \u0431\u0435\u0437\u044b\u043c\u044f\u043d\u043d\u043e\u0439.<\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0435 \u0432 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0443 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<ul>\n<li>\n<p>\u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0432 \u043a\u0430\u0432\u044b\u0447\u043a\u0430\u0445;<\/p>\n<\/li>\n<li>\n<p>\u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u044c \u0432 \u0432\u0438\u0434\u0435 \u0434\u0432\u043e\u0435\u0442\u043e\u0447\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 (\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u043e \u0434\u0432\u0443\u0445 \u0437\u043d\u0430\u043a\u043e\u0432 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u044f\u0442\u043e\u0439).<\/p>\n<\/li>\n<\/ul>\n<pre><code>pie title \u041f\u0440\u043e\u0434\u0430\u0436\u0438 \u043b\u0435\u0433\u043a\u0438\u0445 \u0437\u0430\u043a\u0443\u0441\u043e\u043a \u0437\u0430 \u0434\u0435\u043a\u0430\u0431\u0440\u044c 2021     \"\u0421\u0435\u043d\u0434\u0432\u0438\u0447\u0438\" : 223     \"\u0421\u0430\u043b\u0430\u0442\u044b\" : 50     \"\u041a\u0430\u043d\u0430\u043f\u0435\" : 100<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f44\/28d\/fcf\/f4428dfcf92aecf80f138c672fba8b9f.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f44\/28d\/fcf\/f4428dfcf92aecf80f138c672fba8b9f.png\"\/><figcaption><\/figcaption><\/figure>\n<h2>\u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043f\u0443\u0442\u0438<\/h2>\n<p><a class=\"anchor\" name=\"journey\" id=\"journey\"><\/a><\/p>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043f\u0443\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043a\u0430\u0436\u0434\u044b\u0439 \u0442\u0438\u043f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u043c \u0438\u043b\u0438 \u0432\u0435\u0431 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c. \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0441\u0445\u0435\u043c \u0432 Mermaid \u0435\u0441\u0442\u044c \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e <code>journey<\/code>, <code>title<\/code> \u0442\u0430\u043a\u0436\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0432\u0441\u0435\u0439 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>section<\/code> \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u0434\u0435\u043b\u044b. \u0412 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0448\u0430\u0433\u0438 \u0441 \u043e\u0446\u0435\u043d\u043a\u043e\u0439 \u043f\u043e \u0434\u0435\u0441\u044f\u0442\u0438\u0431\u0430\u043b\u043b\u044c\u043d\u043e\u0439 \u0448\u043a\u0430\u043b\u0435 \u0438 \u0437\u0430\u043a\u0440\u0435\u043f\u043b\u0435\u043d\u043d\u044b\u043c \u0437\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435\u043c \u043b\u0438\u0446\u043e\u043c. \u0412\u0441\u0435 \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u044c \u0432 \u0432\u0438\u0434\u0435 \u0434\u0432\u043e\u0435\u0442\u043e\u0447\u0438\u044f.<\/p>\n<pre><code>journey     title \u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438     section \u041f\u043e\u0438\u0441\u043a \/ \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435       \u041f\u043e\u0438\u0441\u043a \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438: 5: \u042f       \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435: 5: \u042f     section \u041f\u0438\u0448\u0435\u043c       \u041f\u0438\u0448\u0435\u043c \u0447\u0435\u0440\u043d\u043e\u0432\u0438\u043a: 5: \u042f       \u0413\u043e\u0442\u043e\u0432\u0438\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438: 4: \u042f     section \u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c         \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c: 3: \u042f         \u0424\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0430\u0432\u043a\u0438: 2: \u042f     section \u041f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044f         \u041f\u0443\u0431\u043b\u0438\u043a\u0443\u0435\u043c: 5: \u042f         \u0420\u0430\u0434\u0443\u0435\u043c\u0441\u044f: 8: \u042f, \u041c\u043e\u0439 \u043a\u043e\u0442<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/039\/3e5\/a7e\/0393e5a7ec031f88c888bb9d72663c7d.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/039\/3e5\/a7e\/0393e5a7ec031f88c888bb9d72663c7d.png\"\/><figcaption><\/figcaption><\/figure>\n<h2>\u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u0413\u0430\u043d\u0442\u0430<\/h2>\n<p><a class=\"anchor\" name=\"gantt\" id=\"gantt\"><\/a><\/p>\n<p>\u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u0413\u0430\u043d\u0442\u0430 \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c. \u041e\u0431\u044b\u0447\u043d\u043e \u0442\u0430\u043a\u0430\u044f \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u2014 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0448\u043a\u0430\u043b\u044b \u0438 \u0437\u0430\u0434\u0430\u0447. \u041f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0432\u0438\u0434\u044b \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b \u0438 \u043f\u0435\u0440\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b\u0438 \u0430\u0436 \u0432 1910 \u0433\u043e\u0434\u0443, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0437\u0430 \u0431\u043e\u043b\u0435\u0435 \u0447\u0435\u043c \u0441\u043e\u0442\u043d\u044e \u043b\u0435\u0442 \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u044b\u0435 \u0432\u0438\u0434\u044b. \u041d\u043e \u0443 \u0432\u0441\u0435\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0434\u043d\u0430 \u0438 \u0442\u0430\u0436\u0435 \u0437\u0430\u0434\u0430\u0447\u0430.\u00a0<\/p>\n<p>\u0412 Mermaid \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u0413\u0430\u043d\u0442\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u2014 \u043d\u0430 \u043e\u0441\u0438 X \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0448\u043a\u0430\u043b\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0430 \u043d\u0430 \u043e\u0441\u0438 Y \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0438\u0445 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f. \u0422\u0430\u043a\u043e\u0439 \u0432\u0438\u0434 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u043c \u0441\u043b\u043e\u0432\u043e\u043c <code>gantt<\/code>, \u0432 <code>title<\/code> \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435. \u0414\u0430\u043b\u0435\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0444\u043e\u0440\u043c\u0430\u0442 \u0434\u0430\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0439 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b (<code>dateFormat<\/code>). \u0420\u0430\u0437\u0434\u0435\u043b\u044b \u043f\u043e \u043e\u0441\u0438 Y \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 <code>section<\/code> \u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0430. \u0410 \u0434\u0430\u043b\u0435\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0441\u0430\u043c\u0438 \u0437\u0430\u0434\u0430\u0447\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 \u043a\u043e\u0440\u043e\u0442\u043a\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430 \u0437\u0430\u0434\u0430\u0447\u0438, \u0438\u043c\u0435\u043d\u0438, \u0434\u0430\u0442\u044b \u043d\u0430\u0447\u0430\u043b\u0430 \u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0442\u0435\u043a\u0441\u0442 \u0437\u0430\u0434\u0430\u0447\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u0441 \u043b\u0435\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438, \u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0441 \u043f\u0440\u0430\u0432\u043e\u0439 \u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0437\u0430\u043f\u044f\u0442\u043e\u0439. \u0427\u0435\u0440\u0435\u0437 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e after \u043c\u043e\u0436\u043d\u043e \u044f\u0432\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u0434\u0430\u0447 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0440\u0430\u0437\u0434\u0435\u043b\u0430, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0442\u043e \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0441\u0430\u043c\u0430 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442 \u0438\u0445 \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443. <\/p>\n<pre><code>gantt     title \u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u0413\u0430\u043d\u0442\u0430     dateFormat  YYYY-MM-DD     section \u0421\u0435\u043a\u0446\u0438\u044f 1     \u0417\u0430\u0434\u0430\u0447\u0430 1         :a1, 2014-01-01, 15d     \u0417\u0430\u0434\u0430\u0447\u0430 2         :20d     section \u0421\u0435\u043a\u0446\u0438\u044f 2     \u0417\u0430\u0434\u0430\u0447\u0430 1         :2014-01-12  , 12d     \u0417\u0430\u0434\u0430\u0447\u0430 2         : 24d<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/21d\/e95\/2d8\/21de952d832d29cc80fdcfa5b149f72e.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/21d\/e95\/2d8\/21de952d832d29cc80fdcfa5b149f72e.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043d\u0430 \u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435:<\/p>\n<ul>\n<li>\n<p><code>crit<\/code> \u2014 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432\u0430\u0436\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438;<\/p>\n<\/li>\n<li>\n<p><code>active<\/code> \u2014 \u0437\u0430\u0434\u0430\u0447\u0438 \u0432 \u0440\u0430\u0431\u043e\u0442\u0435;<\/p>\n<\/li>\n<li>\n<p><code>done<\/code> \u2014 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438;<\/p>\n<\/li>\n<li>\n<p><code>milestone<\/code> \u2014 \u0432\u0435\u0445\u0438 (\u0435\u0434\u0438\u043d\u0438\u0447\u043d\u044b\u0435 \u0432\u0430\u0436\u043d\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f).<\/p>\n<\/li>\n<\/ul>\n<pre><code>gantt     title \u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u0413\u0430\u043d\u0442\u0430     dateFormat  YYYY-MM-DD     section \u0421\u0435\u043a\u0446\u0438\u044f 1     Milestone   :milestone, a1, 2014-01-01, 15d     Crit        :crit, a2, 2014-01-01, 15d      Active      :active, a3, 2014-01-01, 15d     Done        :done, a4, 2014-01-01, 15d<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e8b\/d45\/979\/e8bd459799bf2b554aa305c3c95a3aba.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e8b\/d45\/979\/e8bd459799bf2b554aa305c3c95a3aba.png\"\/><figcaption><\/figcaption><\/figure>\n<h2>UML-\u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b<\/h2>\n<p><a class=\"anchor\" name=\"uml\" id=\"uml\"><\/a><\/p>\n<p>UML-\u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u0445\u0435\u043c\u0430\u0442\u0438\u0447\u043d\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438 \u0438\u0445 \u0441\u0432\u044f\u0437\u0435\u0439 \u0432 \u043a\u043e\u0434\u0435. Mermaid \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 <code>classDiagram<\/code>. \u041a\u0430\u0436\u0434\u044b\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0442\u0440\u0438 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435:<\/p>\n<ul>\n<li>\n<p>\u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 \u0438 \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0432 \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043a\u043b\u0430\u0441\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u043e \u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0439 \u0431\u0443\u043a\u0432\u044b \u0438 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u043b\u0435\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e;<\/p>\n<\/li>\n<li>\n<p>\u0432 \u043d\u0438\u0436\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u044b \u043c\u0435\u0442\u043e\u0434\u044b \u043a\u043b\u0430\u0441\u0441\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0415\u0441\u0442\u044c \u0434\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0437\u0430\u0434\u0430\u0442\u044c \u043f\u043e\u043b\u044f \u043a\u043b\u0430\u0441\u0441\u0430. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435, \u043d\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043c\u0435\u043d\u044c\u0448\u0435 \u043c\u0435\u0441\u0442\u0430 \u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043c\u0435\u043d\u044c\u0448\u0435 \u043a\u043e\u0434\u0430:<\/p>\n<pre><code>classDiagram     class BankAccount     BankAccount : +String owner     BankAccount : +Bigdecimal balance     BankAccount : +deposit(amount)     BankAccount : +withdrawl(amount)      \u0418\u043b\u0438  classDiagram class BankAccount{     +String owner     +BigDecimal balance     +deposit(amount)     +withdrawl(amount) }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b0e\/362\/86f\/b0e36286f1104ca43da8595c725f5b19.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b0e\/362\/86f\/b0e36286f1104ca43da8595c725f5b19.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043f\u043e\u043b\u0435\u0439 \u043a\u043b\u0430\u0441\u0441\u0430 \u0443\u0441\u043b\u043e\u0432\u043d\u043e \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u043f\u0435\u0440\u0435\u0434 \u0441\u0430\u043c\u0438\u043c \u043f\u043e\u043b\u0435\u043c:<\/p>\n<ul>\n<li>\n<p>+ \u2014 public;<\/p>\n<\/li>\n<li>\n<p>&#8212; \u2014 private;<\/p>\n<\/li>\n<li>\n<p># \u2014 protected;<\/p>\n<\/li>\n<li>\n<p>~ \u2014 package.<\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438 \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0432\u0438\u0434\u043e\u0432 \u0441\u0442\u0440\u0435\u043b\u043e\u043a, \u043e\u0431\u0449\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code>[\u043a\u043b\u0430\u0441\u0441][\u0441\u0442\u0440\u0435\u043b\u043a\u0430][\u043a\u043b\u0430\u0441\u0441]<\/code><\/pre>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td data-colwidth=\"332\" width=\"332\">\n<p><strong>\u0422\u0438\u043f<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u00a0<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"332\" width=\"332\">\n<p>&lt;|&#8212;<\/p>\n<\/td>\n<td>\n<p>\u041d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435\u00a0<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"332\" width=\"332\">\n<p>*&#8212;<\/p>\n<\/td>\n<td>\n<p>\u041a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"332\" width=\"332\">\n<p>o&#8212;<\/p>\n<\/td>\n<td>\n<p>\u0410\u0433\u0440\u0435\u0433\u0430\u0446\u0438\u044f<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"332\" width=\"332\">\n<p>&#8212;><\/p>\n<\/td>\n<td>\n<p>\u0410\u0441\u0441\u043e\u0446\u0438\u0430\u0446\u0438\u044f<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"332\" width=\"332\">\n<p>&#8212;<\/p>\n<\/td>\n<td>\n<p>\u0421\u0441\u044b\u043b\u043a\u0430 (\u0441\u043f\u043b\u043e\u0448\u043d\u0430\u044f)<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"332\" width=\"332\">\n<p>..><\/p>\n<\/td>\n<td>\n<p>\u0417\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"332\" width=\"332\">\n<p>..|><\/p>\n<\/td>\n<td>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"332\" width=\"332\">\n<p>..<\/p>\n<\/td>\n<td>\n<p>\u0421\u0441\u044b\u043b\u043a\u0430 (\u043f\u0443\u043d\u043a\u0442\u0438\u0440\u043d\u0430\u044f)<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<pre><code><\/code><\/pre>\n<pre><code>classDiagram classA &lt;|-- classB classC *-- classD classE o-- classF classG &lt;-- classH classI -- classJ classK &lt;.. classL classM &lt;|.. classN classO .. classP<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a15\/1fa\/437\/a151fa437877ca116639367406889be4.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a15\/1fa\/437\/a151fa437877ca116639367406889be4.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u044f\u0432\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u0438\u0434 \u0441\u0432\u044f\u0437\u0438 \u0432 \u0432\u0438\u0434\u0435 \u0442\u0435\u043a\u0441\u0442\u0430:<\/p>\n<pre><code>classE --o classF : \u0410\u0433\u0440\u0435\u0433\u0430\u0446\u0438\u044f<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ef6\/44c\/2e6\/ef644c2e610edbed3115b2951d7f3e68.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ef6\/44c\/2e6\/ef644c2e610edbed3115b2951d7f3e68.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0414\u0432\u0443\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0435\u043b\u043a\u0438, \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0439 \u0432 \u043e\u0431\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u044b:<\/p>\n<pre><code>classDiagram     Animal &lt;|--|> Zebra<\/code><\/pre>\n<p>\u0412\u0441\u0435\u0433\u043e \u0434\u0432\u0443\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b \u0434\u043b\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0432\u0438\u0434\u043e\u0432 \u0432\u0437\u0430\u0438\u043c\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0439:<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p><strong>\u0422\u0438\u043f<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>&lt;|<\/p>\n<\/td>\n<td>\n<p>\u041d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>*<\/p>\n<\/td>\n<td>\n<p>\u041a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>o<\/p>\n<\/td>\n<td>\n<p>\u0410\u0433\u0440\u0435\u0433\u0430\u0446\u0438\u044f<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>><\/p>\n<\/td>\n<td>\n<p>\u0410\u0441\u0441\u043e\u0446\u0438\u0430\u0446\u0438\u044f<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>&lt;<\/p>\n<\/td>\n<td>\n<p>\u0410\u0441\u0441\u043e\u0446\u0438\u0430\u0446\u0438\u044f<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>|><\/p>\n<\/td>\n<td>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0412\u0441\u0435\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0442\u0438\u043f\u044b \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f:<\/p>\n<ul>\n<li>\n<p>1 \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d;<\/p>\n<\/li>\n<li>\n<p>0..1 \u2014 \u043d\u043e\u043b\u044c \u0438\u043b\u0438 \u043e\u0434\u0438\u043d;<\/p>\n<\/li>\n<li>\n<p>1..* \u2014 \u043e\u0434\u0438\u043d \u0438\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u0435;<\/p>\n<\/li>\n<li>\n<p>* \u2014 \u043c\u043d\u043e\u0433\u043e;<\/p>\n<\/li>\n<li>\n<p>n \u2014 n-\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e;<\/p>\n<\/li>\n<li>\n<p>0..n \u2014 \u043e\u0442 \u043d\u0443\u043b\u044f \u0434\u043e n;<\/p>\n<\/li>\n<li>\n<p>1..n \u2014 \u043e\u0442 \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0434\u043e n.<\/p>\n<\/li>\n<\/ul>\n<p>\u0417\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code>classDiagram     Customer \"1\" --> \"*\" Ticket     Student \"1\" --> \"1..*\" Course     Galaxy --> \"many\" Star : Contains<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/128\/55d\/821\/12855d8210d066cd756b98be3c9cb706.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/128\/55d\/821\/12855d8210d066cd756b98be3c9cb706.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041a\u043b\u0430\u0441\u0441\u044b \u043c\u043e\u0436\u043d\u043e \u0430\u043d\u043d\u043e\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043c\u0430\u0440\u043a\u0435\u0440\u043e\u0432, \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0432 \u0431\u043b\u043e\u043a\u0435 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u044b 4 \u0432\u0438\u0434\u0430 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0439:<\/p>\n<ul>\n<li>\n<p>&lt;&lt;Interface>> \u2014 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b;<\/p>\n<\/li>\n<li>\n<p>&lt;&lt;abstract>> \u2014 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441;<\/p>\n<\/li>\n<li>\n<p>&lt;&lt;Service>> \u2014 \u043a\u043b\u0430\u0441\u0441\u044b-\u0441\u0435\u0440\u0432\u0438\u0441\u044b;<\/p>\n<\/li>\n<li>\n<p>&lt;&lt;enumeration>> \u2014 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0441 \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u044e \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u0417\u0430\u0434\u0430\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0434\u0432\u0443\u043c\u044f \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430:<\/p>\n<pre><code>classDiagram class Shape &lt;&lt;interface>> Shape Shape : noOfVertices Shape : draw()  \u0418\u043b\u0438  class ShapeCopy {     &lt;&lt;interface>>     noOfVertices     draw() }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8c8\/417\/cc3\/8c8417cc3d515ff3991d9ef8af56d7a0.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8c8\/417\/cc3\/8c8417cc3d515ff3991d9ef8af56d7a0.png\"\/><figcaption><\/figcaption><\/figure>\n<p>UML-\u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430\u043c \u0442\u0430\u043a \u0436\u0435 \u043a\u0430\u043a \u0438 \u0431\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u0430\u043c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435. \u041e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u0441\u043b\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 <code>direction<\/code>.<\/p>\n<pre><code>classDiagram   direction LR   class Student {     -idCard : IdCard   }    class IdCard{     -id : int     -name : string   }   Student \"1\" --o \"1\" IdCard : carries<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d76\/661\/352\/d76661352f7cbabe8323a38a97e27c20.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d76\/661\/352\/d76661352f7cbabe8323a38a97e27c20.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041a\u043b\u0430\u0441\u0441 UML-\u0441\u0445\u0435\u043c\u044b \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u0435 \u0441\u0441\u044b\u043b\u043a\u0443 \u0438 \u0431\u044b\u0442\u044c \u043a\u043b\u0438\u043a\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u043c. \u0417\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435 \u0442\u0430\u043a\u0438\u043c \u0436\u0435 \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043a\u0430\u043a \u0438 \u0432 \u0431\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u0430\u0445:<\/p>\n<pre><code>classDiagram   direction LR   class Student {     -idCard : IdCard   } link Student \"http:\/\/www.github.com\"<\/code><\/pre>\n<h2>\u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/h2>\n<p><a class=\"anchor\" name=\"stateDiagram\" id=\"stateDiagram\"><\/a><\/p>\n<p>\u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c. \u041f\u043e \u0432\u043d\u0435\u0448\u043d\u0435\u043c\u0443 \u0432\u0438\u0434\u0443 \u0447\u0435\u043c-\u0442\u043e \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e\u0442 \u0431\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u044b. \u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439.<\/p>\n<p>Mermaid \u0443\u043c\u0435\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b, \u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u0431\u043b\u0438\u0436\u0435\u043d \u043a PlantUML, \u0447\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u044e \u0438 \u043e\u0431\u043c\u0435\u043d \u043a\u043e\u0434\u043e\u043c. \u0417\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 <code>stateDiagram<\/code> \u0438\u043b\u0438 <code>stateDiagram-v2<\/code>. \u041b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0442\u043e\u0440\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430.<\/p>\n<pre><code>stateDiagram-v2     [*] --> Still     Still --> [*]      Still --> Moving     Moving --> Still     Moving --> Crash     Crash --> [*]<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/6eb\/324\/848\/6eb3248480f22ccbc398d6c2afa45ea3.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6eb\/324\/848\/6eb3248480f22ccbc398d6c2afa45ea3.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0412 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0439 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0442\u0440\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u2014 \u00abStill\u00bb (\u041f\u043e\u043a\u043e\u0439), \u00abMoving\u00bb (\u0414\u0432\u0438\u0436\u0435\u043d\u0438\u0435) \u0438 \u00abCrash\u00bb (\u0421\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0435). \u0418\u0437 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u043e\u043a\u043e\u044f \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e, \u043d\u043e \u043d\u0435\u043b\u044c\u0437\u044f \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f. \u0410 \u0432\u043e\u0442 \u0438\u0437 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code>stateDiagram-v2     s1<\/code><\/pre>\n<p>\u0414\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u043f\u0443\u0442\u0438:<\/p>\n<pre><code>stateDiagram-v2     state \"This is a state description\" as s2     s2 : This is a state description<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434 \u043e\u0442 \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u0435\u043b\u043a\u0430\u043c\u0438:<\/p>\n<pre><code>stateDiagram-v2     s1 --> s2<\/code><\/pre>\n<p>\u0422\u0435\u043a\u0441\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a:<\/p>\n<pre><code>stateDiagram-v2     s1 --> s2: A transition<\/code><\/pre>\n<p>\u041d\u0430\u0447\u0430\u043b\u043e \u0438 \u043a\u043e\u043d\u0435\u0446 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u0437\u0432\u0435\u0437\u0434\u043e\u0447\u043a\u0438, \u0430 \u0434\u0430\u043b\u0435\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0441\u0442\u0440\u0435\u043b\u043a\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430:<\/p>\n<pre><code>stateDiagram-v2     [*] --> s1     s1 --> [*]<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8ab\/d0f\/8ed\/8abd0f8edac68372477cd422dd0c045e.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8ab\/d0f\/8ed\/8abd0f8edac68372477cd422dd0c045e.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0442\u044c \u0432 \u043f\u043e\u0434\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439. \u0413\u043b\u0430\u0432\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442\u0441\u044f \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u043c \u0441\u043b\u043e\u0432\u043e\u043c <code>state<\/code>, \u0437\u0430 \u043d\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440, \u0430 \u043f\u043e\u0442\u043e\u043c \u0444\u0438\u0433\u0443\u0440\u043d\u044b\u0435 \u0441\u043a\u043e\u0431\u043a\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0442\u0435\u043b\u043e \u043f\u043e\u0434\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<pre><code>stateDiagram-v2     [*] --> First     state First {         [*] --> second         second --> [*]     }<\/code><\/pre>\n<p>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u0440\u043e\u0432\u043d\u0435\u0439:<\/p>\n<pre><code>stateDiagram-v2     [*] --> First      state First {         [*] --> Second          state Second {             [*] --> second             second --> Third              state Third {                 [*] --> third                 third --> [*]             }         }     }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/236\/0a0\/c5c\/2360a0c5c932c9716ddb3544d9b7bbbf.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/236\/0a0\/c5c\/2360a0c5c932c9716ddb3544d9b7bbbf.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041c\u043e\u0436\u043d\u043e \u043e\u0444\u043e\u0440\u043c\u043b\u044f\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u043c\u0435\u0436\u0434\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u043f\u043e\u0434\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438:<\/p>\n<pre><code>stateDiagram-v2     [*] --> First     First --> Second     First --> Third      state First {         [*] --> fir         fir --> [*]     }     state Second {         [*] --> sec         sec --> [*]     }     state Third {         [*] --> thi         thi --> [*]     }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/98c\/545\/5ae\/98c5455aea3d8cfc47cb5f90a3bb75f1.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/98c\/545\/5ae\/98c5455aea3d8cfc47cb5f90a3bb75f1.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0412\u044b\u0431\u043e\u0440 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u044f. \u0414\u043b\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u044b\u0431\u043e\u0440\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e <code>choice<\/code>:<\/p>\n<pre><code>stateDiagram-v2     state if_state &lt;&lt;choice>>     [*] --> IsPositive     IsPositive --> if_state     if_state --> False: if n &lt; 0     if_state --> True : if n >= 0<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0ec\/668\/8af\/0ec6688af2e3fc713e881d8ffa0cacaf.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0ec\/668\/8af\/0ec6688af2e3fc713e881d8ffa0cacaf.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0441\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043e\u0434\u043d\u043e \u043e\u0431\u0449\u0435\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f, \u043e\u0442\u043c\u0435\u0447\u0430\u044e\u0442 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u043c \u0441\u043b\u043e\u0432\u043e\u043c <code>fork<\/code>, \u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u043b\u0438\u044f\u043d\u0438\u0435, \u043e\u0442\u043c\u0435\u0447\u0430\u044e\u0442 \u0441\u043b\u043e\u0432\u043e\u043c <code>join<\/code>.<\/p>\n<pre><code>stateDiagram-v2     state fork_state &lt;&lt;fork>>       [*] --> fork_state       fork_state --> State2       fork_state --> State3        state join_state &lt;&lt;join>>       State2 --> join_state       State3 --> join_state       join_state --> State4       State4 --> [*]<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/94a\/d56\/1aa\/94ad561aa6926c82e8ce69b4b02e4a6f.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/94a\/d56\/1aa\/94ad561aa6926c82e8ce69b4b02e4a6f.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041a \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u044f\u0441\u043d\u044f\u044e\u0449\u0438\u0435 \u0437\u0430\u043c\u0435\u0442\u043a\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e <code>note<\/code>, \u043f\u043e\u0441\u043b\u0435 \u0432\u0430\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>right of<\/code> \u0438\u043b\u0438 <code>left of<\/code>. \u0414\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0434\u0432\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0437\u0430\u043f\u0438\u0441\u0438 \u0432 \u043a\u043e\u0434\u0435 \u2014 \u043e\u0434\u0438\u043d \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u0439, \u0434\u0440\u0443\u0433\u043e\u0439 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u0435\u0435:<\/p>\n<pre><code>stateDiagram-v2         State1: The state with a note         note right of State1             Important information! You can write             notes.         end note         State1 --> State2         note left of State2 : This is the note to the left.<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d8e\/964\/28e\/d8e96428e7a36aa24a6084539f029ddb.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d8e\/964\/28e\/d8e96428e7a36aa24a6084539f029ddb.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 <code>directions<\/code>. \u0421\u043f\u0438\u0441\u043e\u043a \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u0430\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0441\u044f \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u0431\u043b\u043e\u043a-\u0441\u0445\u0435\u043c.<\/p>\n<h2>ER-\u043c\u043e\u0434\u0435\u043b\u044c<\/h2>\n<p><a class=\"anchor\" name=\"er\" id=\"er\"><\/a><\/p>\n<p>ER-\u043c\u043e\u0434\u0435\u043b\u044c \u2014 \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u0430\u043d\u043d\u044b\u0445, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0430\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0432\u0435\u0449\u0438, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441 \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0437\u043d\u0430\u043d\u0438\u0439. \u0417\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0431\u0430\u0437 \u0434\u0430\u043d\u043d\u044b\u0445. \u0417\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 <code>erDiagram<\/code>.<\/p>\n<pre><code>erDiagram     CUSTOMER ||--o{ ORDER : places     ORDER ||--|{ LINE-ITEM : contains     CUSTOMER }|..|{ DELIVERY-ADDRESS : uses<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1b6\/142\/830\/1b6142830716923545929c8124b99bb8.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1b6\/142\/830\/1b6142830716923545929c8124b99bb8.png\"\/><figcaption><\/figcaption><\/figure>\n<p>Mermaid \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u0430 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439 \u0441 \u0437\u0430\u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0431\u0443\u043a\u0432\u044b, \u0430 \u0441\u0432\u044f\u0437\u0438 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0439 \u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439 \u00ab\u0433\u0443\u0441\u0438\u043d\u044b\u0435 \u043b\u0430\u043f\u043a\u0438\u00bb.<\/p>\n<p>\u041e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0435\u0439:<\/p>\n<pre><code> &lt;first-entity> [&lt;relationship> &lt;second-entity> : &lt;relationship-label>]<\/code><\/pre>\n<ul>\n<li>\n<p>first-entity \u2014 \u0438\u043c\u044f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438;<\/p>\n<\/li>\n<li>\n<p>relationship \u2014 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0441\u0432\u044f\u0437\u0438;<\/p>\n<\/li>\n<li>\n<p>second-entity \u2014 \u0438\u043c\u044f \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438;<\/p>\n<\/li>\n<li>\n<p>relationship-label \u2014 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443: <\/p>\n<pre><code>PROPERTY ||--|{ ROOM : contains<\/code><\/pre>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p><strong>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043b\u0435\u0432\u0430<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043f\u0440\u0430\u0432\u0430<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>|o<\/p>\n<\/td>\n<td>\n<p>o|<\/p>\n<\/td>\n<td>\n<p>\u041c\u0438\u043d\u0438\u043c\u0443\u043c \u043d\u043e\u043b\u044c, \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c \u043d\u043e\u043b\u044c<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>||<\/p>\n<\/td>\n<td>\n<p>||<\/p>\n<\/td>\n<td>\n<p>\u041c\u0438\u043d\u0438\u043c\u0443\u043c \u043e\u0434\u0438\u043d, \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c \u043e\u0434\u0438\u043d<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>}o<\/p>\n<\/td>\n<td>\n<p>o{<\/p>\n<\/td>\n<td>\n<p>\u041c\u0438\u043d\u0438\u043c\u0443\u043c \u043d\u043e\u043b\u044c, \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c \u043c\u043d\u043e\u0433\u043e\u00a0<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>}|<\/p>\n<\/td>\n<td>\n<p>|{<\/p>\n<\/td>\n<td>\n<p>\u041c\u0438\u043d\u0438\u043c\u0443\u043c \u043e\u0434\u0438\u043d, \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c \u043c\u043d\u043e\u0433\u043e<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0438\u043c\u0435\u043d\u0438 \u0441\u0430\u043c\u043e\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438. \u0422\u0430\u043a\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0432\u0430 \u0432\u0438\u0434\u0430 \u0437\u0430\u043f\u0438\u0441\u0438. <\/p>\n<pre><code>erDiagram     CAR ||--o{ NAMED-DRIVER : allows     CAR {         string registrationNumber         string make         string model     }     PERSON ||--o{ NAMED-DRIVER : is     PERSON {         string firstName         string lastName         int age     }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/de0\/9e6\/d69\/de09e6d69ee50457344a8aabc6c77091.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/de0\/9e6\/d69\/de09e6d69ee50457344a8aabc6c77091.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u043a\u043b\u044e\u0447\u0438 \u0438\u043b\u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438. \u041f\u0435\u0440\u0432\u0438\u0447\u043d\u044b\u0435 \u043a\u043b\u044e\u0447\u0438 (Primary Key) \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a <code>PR<\/code>, \u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u043a\u043b\u044e\u0447\u0438 (Foreign Key) <code>FK<\/code>. \u041a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u0436\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u0432\u043e\u0439\u043d\u044b\u043c\u0438 \u043a\u0430\u0432\u044b\u0447\u043a\u0430\u043c\u0438 \u0432 \u043a\u043e\u043d\u0446\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u0435 \u0434\u0432\u043e\u0439\u043d\u044b\u0435 \u043a\u0430\u0432\u044b\u0447\u043a\u0438.<\/p>\n<pre><code>erDiagram     CAR ||--o{ NAMED-DRIVER : allows     CAR {         string allowedDriver FK \"The license of the allowed driver\"         string registrationNumber         string make         string model     }     PERSON ||--o{ NAMED-DRIVER : is     PERSON {         string driversLicense PK \"The license #\"         string firstName         string lastName         int age     }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/bd5\/0e2\/8fc\/bd50e28fc762b0057646a2b83231fc31.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/bd5\/0e2\/8fc\/bd50e28fc762b0057646a2b83231fc31.png\"\/><figcaption><\/figcaption><\/figure>\n<h2>\u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/h2>\n<p><a class=\"anchor\" name=\"sequenceDiagram\" id=\"sequenceDiagram\"><\/a><\/p>\n<p>\u041d\u0430 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430\u0445 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0439 \u0446\u0438\u043a\u043b \u043e\u0434\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0438\u0445 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435. \u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 \u0430\u043a\u0442\u0435\u0440\u043e\u0432 \u0432 \u0432\u0438\u0434\u0435 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432 \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0432 \u0432\u0438\u0434\u0435 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u00ab\u043b\u0438\u043d\u0438\u0439 \u0436\u0438\u0437\u043d\u0438\u00bb.<\/p>\n<p>\u0412 Mermaid \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 <code>sequenceDiagram<\/code>:<\/p>\n<pre><code>sequenceDiagram     Alice->>John: Hello John, how are you?     John-->>Alice: Great!     Alice-)John: See you later!<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1fd\/dc8\/cb9\/1fddc8cb9c74409ba368781af82170d0.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1fd\/dc8\/cb9\/1fddc8cb9c74409ba368781af82170d0.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0410\u043a\u0442\u0435\u0440\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0442\u044c \u043d\u0435\u044f\u0432\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0439, \u0430 \u043c\u043e\u0436\u043d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u0432\u0441\u0435\u0445 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 <code>participant<\/code>, \u0430 \u043f\u043e\u0442\u043e\u043c \u043e\u0442\u043c\u0435\u0447\u0430\u0442\u044c \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f.<\/p>\n<pre><code>sequenceDiagram     participant \u0412\u0430\u043d\u044f     participant \u041f\u0435\u0442\u044f     \u0412\u0430\u043d\u044f->>\u041f\u0435\u0442\u044f: \u041f\u0440\u0438\u0432\u0435\u0442, \u041f\u0435\u0442\u044f     \u041f\u0435\u0442\u044f->>\u0412\u0430\u043d\u044f: \u041f\u0440\u0438\u0432\u0435\u0442, \u0412\u0430\u043d\u044f<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/990\/a99\/9a3\/990a999a39b5b14aec219fc2a5cb7188.png\" width=\"1280\" height=\"720\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/990\/a99\/9a3\/990a999a39b5b14aec219fc2a5cb7188.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0438\u043b\u0438 \u043d\u0435\u043f\u0440\u0435\u043e\u0434\u043e\u043b\u0438\u043c\u043e\u0435 \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u0442\u0438\u043a\u043c\u0435\u043d\u043e\u0432 \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0431\u0435\u0437\u043b\u0438\u0447\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432, \u0442\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e <code>participant<\/code> \u043d\u0430\u0434\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430 <code>actor<\/code>.<\/p>\n<pre><code>sequenceDiagram     actor \u0412\u0430\u043d\u044f     actor \u041f\u0435\u0442\u044f     \u0412\u0430\u043d\u044f->>\u041f\u0435\u0442\u044f: \u041f\u0440\u0438\u0432\u0435\u0442, \u041f\u0435\u0442\u044f     \u041f\u0435\u0442\u044f->>\u0412\u0430\u043d\u044f: \u041f\u0440\u0438\u0432\u0435\u0442, \u0412\u0430\u043d\u044f<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8ee\/1fd\/e55\/8ee1fde55432219b2b524e16c501377a.png\" width=\"1280\" height=\"720\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8ee\/1fd\/e55\/8ee1fde55432219b2b524e16c501377a.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0438\u0441\u0430\u0442\u044c \u0438\u043c\u044f \u0430\u043a\u0442\u0435\u0440\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435 \u0443\u0434\u043e\u0431\u043d\u043e \u0438 \u0434\u043e\u043b\u0433\u043e, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u0441\u0445\u0435\u043c\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0435\u0441\u044f\u0442\u043a\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0430\u043a\u0442\u0435\u0440\u043e\u0432. \u0414\u043b\u044f \u044d\u0442\u0438\u0445 \u0446\u0435\u043b\u0435\u0439 \u0432 Mermaid \u0435\u0441\u0442\u044c \u043f\u0441\u0435\u0432\u0434\u043e\u043d\u0438\u043c\u044b. \u0418\u043c\u044f \u0430\u043a\u0442\u0435\u0440\u0430 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0434\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0431\u0443\u043a\u0432 \u0438\u043b\u0438 \u0431\u0443\u043a\u0432\u0435\u043d\u043d\u044b\u0445 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u0432.<\/p>\n<pre><code>sequenceDiagram     participant V as \u0412\u0430\u043d\u044f     participant P as \u041f\u0435\u0442\u044f     V->>P: \u041f\u0440\u0438\u0432\u0435\u0442, \u041f\u0435\u0442\u044f     P->>V: \u041f\u0440\u0438\u0432\u0435\u0442, \u0412\u0430\u043d\u044f<\/code><\/pre>\n<p>\u0421\u0432\u044f\u0437\u0438 \u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 \u0441\u043f\u043b\u043e\u0448\u043d\u044b\u0445 \u0438\u043b\u0438 \u043f\u0443\u043d\u043a\u0442\u0438\u0440\u043d\u044b\u0445 \u043b\u0438\u043d\u0438\u0439. \u041e\u0431\u0449\u0438\u0439 \u0432\u0438\u0434 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code>[\u0410\u043a\u0442\u0435\u0440][\u0421\u0442\u0440\u0435\u043b\u043a\u0430][\u0410\u043a\u0442\u0435\u0440]:\u0422\u0435\u043a\u0441\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f<\/code><\/pre>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p><strong>\u0422\u0438\u043f<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>-><\/p>\n<\/td>\n<td>\n<p>\u0421\u043f\u043b\u043e\u0448\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u0431\u0435\u0437 \u0441\u0442\u0440\u0435\u043b\u043a\u0438<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>&#8212;><\/p>\n<\/td>\n<td>\n<p>\u041f\u0443\u043d\u043a\u0442\u0438\u0440\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u0431\u0435\u0437 \u0441\u0442\u0440\u0435\u043b\u043a\u0438\u00a0<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>->><\/p>\n<\/td>\n<td>\n<p>\u0421\u043f\u043b\u043e\u0448\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u0441\u043e \u0441\u0442\u0440\u0435\u043b\u043a\u043e\u0439<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>&#8212;>><\/p>\n<\/td>\n<td>\n<p>\u041f\u0443\u043d\u043a\u0442\u0438\u0440\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u0441\u043e \u0441\u0442\u0440\u0435\u043b\u043a\u043e\u0439<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>-x<\/p>\n<\/td>\n<td>\n<p>\u0421\u043f\u043b\u043e\u0448\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u0441 \u043a\u0440\u0435\u0441\u0442\u0438\u043a\u043e\u043c \u043d\u0430 \u043a\u043e\u043d\u0446\u0435<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>&#8212;x<\/p>\n<\/td>\n<td>\n<p>\u041f\u0443\u043d\u043a\u0442\u0438\u0440\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u0441 \u043a\u0440\u0435\u0441\u0442\u0438\u043a\u043e\u043c \u043d\u0430 \u043a\u043e\u043d\u0446\u0435<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>-)<\/p>\n<\/td>\n<td>\n<p>\u0421\u043f\u043b\u043e\u0448\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0439 \u0441\u0442\u0440\u0435\u043b\u043a\u0438<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>&#8212;)<\/p>\n<\/td>\n<td>\n<p>\u041f\u0443\u043d\u043a\u0442\u0438\u0440\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0439 \u0441\u0442\u0435\u043b\u043a\u0438<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0410\u043a\u0442\u0435\u0440\u0430 \u044f\u0432\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0434\u0435\u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043e\u0442\u043c\u0435\u0447\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0435\u0433\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f. \u041e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u0441\u043b\u043e\u0432 <code>activate<\/code> \u0438 <code>deactivate<\/code>. \u0410\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430.<\/p>\n<pre><code>sequenceDiagram     participant V as \u0412\u0430\u043d\u044f     participant P as \u041f\u0435\u0442\u044f     V-)P: \u041f\u0440\u0438\u0432\u0435\u0442, \u041f\u0435\u0442\u044f     activate P     P->>V: \u041f\u0440\u0438\u0432\u0435\u0442, \u0412\u0430\u043d\u044f     deactivate P<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/21e\/514\/c35\/21e514c352a7944e919f082c9071c77e.png\" width=\"1280\" height=\"720\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/21e\/514\/c35\/21e514c352a7944e919f082c9071c77e.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0414\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0438 \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043d\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c \u0432 \u0432\u0438\u0434\u0435 \u0437\u043d\u0430\u043a\u043e\u0432 \u00ab+\/-\u00bb \u043d\u0430 \u043a\u043e\u043d\u0446\u0435 \u0441\u0442\u0440\u0435\u043b\u043e\u043a, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0431\u0443\u0434\u0435\u0442 \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u0435\u043d: <\/p>\n<pre><code>sequenceDiagram     participant V as \u0412\u0430\u043d\u044f     participant P as \u041f\u0435\u0442\u044f     V-)+P: \u041f\u0440\u0438\u0432\u0435\u0442, \u041f\u0435\u0442\u044f     P->>-V: \u041f\u0440\u0438\u0432\u0435\u0442, \u0412\u0430\u043d\u044f<\/code><\/pre>\n<p>\u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u043d\u0430\u0431\u0436\u0430\u0442\u044c \u0437\u0430\u043c\u0435\u0442\u043a\u0430\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0431\u0449\u0435\u0433\u043e \u0432\u0438\u0434\u0430 \u0437\u0430\u043f\u0438\u0441\u0438:<\/p>\n<pre><code>Note [ right of | left of | over ] [\u0410\u043a\u0442\u0435\u0440]: \u0422\u0435\u043a\u0441\u0442 \u0437\u0430\u043c\u0435\u0442\u043a\u0438<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0441\u043b\u043e\u0432\u0430 <code>right of<\/code> \u0438 <code>left of<\/code> \u0443\u0436\u0435 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u043b\u0438\u0441\u044c \u043d\u0430\u043c, \u0442\u043e \u0441\u043b\u043e\u0432\u043e <code>over<\/code> \u043d\u043e\u0432\u043e\u0435. \u041e\u043d\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u0437\u0430\u043c\u0435\u0442\u043a\u0443 \u0441\u0440\u0430\u0437\u0443 \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0430\u043a\u0442\u0435\u0440\u0430\u0445.<\/p>\n<pre><code>sequenceDiagram     participant V as \u0412\u0430\u043d\u044f     participant P as \u041f\u0435\u0442\u044f     V-)+P: \u041f\u0440\u0438\u0432\u0435\u0442, \u041f\u0435\u0442\u044f     P->>-V: \u041f\u0440\u0438\u0432\u0435\u0442, \u0412\u0430\u043d\u044f     Note over V,P: \u0417\u0430\u043c\u0435\u0442\u043a\u0430<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/41b\/ce1\/895\/41bce189592398a1bd29dc1758d6912d.png\" width=\"1280\" height=\"720\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/41b\/ce1\/895\/41bce189592398a1bd29dc1758d6912d.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0427\u0430\u0441\u0442\u043e \u043e\u0434\u043d\u043e \u0438 \u0442\u043e \u0436\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u0446\u0438\u043a\u043b\u0435 \u0438 \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u043e\u043c. \u0412 Mermaid \u0446\u0438\u043a\u043b\u044b \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 <code>loop<\/code>:<\/p>\n<pre><code>loop \u0422\u0435\u043a\u0441\u0442 \u0446\u0438\u043a\u043b\u0430 ... \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 ... end<\/code><\/pre>\n<p>\u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443:<\/p>\n<pre><code>sequenceDiagram     participant V as \u0412\u0430\u043d\u044f     participant P as \u041f\u0435\u0442\u044f     V-)P: \u041f\u0440\u0438\u0432\u0435\u0442, \u041f\u0435\u0442\u044f     loop \u041a\u0430\u0436\u0434\u043e\u0435 \u0443\u0442\u0440\u043e     P->>V: \u041f\u0440\u0438\u0432\u0435\u0442, \u0412\u0430\u043d\u044f     end<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2a3\/246\/a25\/2a3246a25087cc046b53c4dab44eca5d.png\" width=\"1280\" height=\"720\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2a3\/246\/a25\/2a3246a25087cc046b53c4dab44eca5d.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0410\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0435\u0439:<\/p>\n<pre><code>alt \u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 ... \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 ... else ... \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 ... end<\/code><\/pre>\n<p>\u041d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0431\u0435\u0437 <code>else<\/code>:<\/p>\n<pre><code>opt \u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 ... \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 ... end<\/code><\/pre>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code>sequenceDiagram     participant V as \u0412\u0430\u043d\u044f     participant P as \u041f\u0435\u0442\u044f     V->>P: \u041f\u0435\u0442\u044f, \u043a\u0430\u043a \u0434\u0435\u043b\u0430?     alt \u0415\u0441\u043b\u0438 \u0445\u043e\u0440\u043e\u0448\u043e         P->>V: \u0412\u0441\u0435 \u043e\u0442\u043b\u0438\u0447\u043d\u043e!     else         P->>V: \u0412\u0441\u0435 \u043f\u043b\u043e\u0445\u043e :\u0441     end     opt \u0415\u0441\u043b\u0438 \u0432\u0441\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u0434\u0440\u0430\u0436\u0430\u0435\u0442     P->>V: \u041e\u0442\u0432\u0430\u043b\u0438, \u0412\u0430\u043d\u044f!     end<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/196\/30e\/fb6\/19630efb685ca0fbd3a9fde7e136bfac.png\" width=\"1280\" height=\"720\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/196\/30e\/fb6\/19630efb685ca0fbd3a9fde7e136bfac.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e <code>par<\/code>:<\/p>\n<pre><code>par [\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0435 1] ... \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 ... and [\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0435 2] ... \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 ... and [\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0435 N] ... \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 ... end<\/code><\/pre>\n<p>\u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u0442\u0430\u043a: <\/p>\n<pre><code>sequenceDiagram     participant V as \u0412\u0430\u043d\u044f     participant P as \u041f\u0435\u0442\u044f     participant I as \u0418\u0440\u0438\u043d\u0430      par \u0412\u0430\u043d\u044f \u0438 \u041f\u0435\u0442\u044f         V->>P: \u041f\u0440\u0438\u0432\u0435\u0442, \u041f\u0435\u0442\u044f     and \u0412\u0430\u043d\u044f \u0438 \u0418\u0440\u0438\u043d\u0430          V->>I: \u041f\u0440\u0438\u0432\u0435\u0442, \u0418\u0440\u0438\u043d\u0430     end<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/778\/39c\/c8e\/77839cc8edba0f964fc6bc150e28ba33.png\" width=\"1280\" height=\"720\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/778\/39c\/c8e\/77839cc8edba0f964fc6bc150e28ba33.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0424\u043e\u043d\u0443 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e RGB \u0438 RGBA \u043a\u043e\u0434\u043e\u0432:<\/p>\n<pre><code>rect rgb(0, 255, 0) ... \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 ... end  rect rgba(0, 0, 255, .1) ... \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 ... end<\/code><\/pre>\n<p>\u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443:<\/p>\n<pre><code>sequenceDiagram     participant V as \u0412\u0430\u043d\u044f     participant P as \u041f\u0435\u0442\u044f     participant I as \u0418\u0440\u0438\u043d\u0430      rect rgb(191, 223, 255)     par \u0412\u0430\u043d\u044f \u0438 \u041f\u0435\u0442\u044f         V->>P: \u041f\u0440\u0438\u0432\u0435\u0442, \u041f\u0435\u0442\u044f     and \u0412\u0430\u043d\u044f \u0438 \u0418\u0440\u0438\u043d\u0430          V->>I: \u041f\u0440\u0438\u0432\u0435\u0442, \u0418\u0440\u0438\u043d\u0430     end     end<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7f5\/463\/c25\/7f5463c2517422f398fa20d105298432.png\" width=\"1280\" height=\"720\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7f5\/463\/c25\/7f5463c2517422f398fa20d105298432.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043d\u0430 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0435 \u043c\u043e\u0436\u043d\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u043e\u043d\u0443\u043c\u0435\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 <code>autonumber<\/code> \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043a\u043e\u0434\u0430: <\/p>\n<pre><code>sequenceDiagram     participant V as \u0412\u0430\u043d\u044f     participant P as \u041f\u0435\u0442\u044f     participant I as \u0418\u0440\u0438\u043d\u0430      autonumber     par \u0412\u0430\u043d\u044f \u0438 \u041f\u0435\u0442\u044f         V->>P: \u041f\u0440\u0438\u0432\u0435\u0442, \u041f\u0435\u0442\u044f     and \u0412\u0430\u043d\u044f \u0438 \u0418\u0440\u0438\u043d\u0430          V->>I: \u041f\u0440\u0438\u0432\u0435\u0442, \u0418\u0440\u0438\u043d\u0430     end     loop \u041a\u0430\u0436\u0434\u044b\u0435 \u043f\u043e\u043b\u0447\u0430\u0441\u0430         V->>I: \u0421\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438?     end<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d97\/d1a\/ccb\/d97d1accb92f2b572695641d2b8be444.png\" width=\"1280\" height=\"720\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d97\/d1a\/ccb\/d97d1accb92f2b572695641d2b8be444.png\"\/><figcaption><\/figcaption><\/figure>\n<h2>\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 GitHub<\/h2>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u043e \u043d\u0430\u0442\u0438\u0432\u043d\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c Mermaid \u0432 GitHub \u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0441\u0445\u0435\u043c\u044b \u0438 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0432 README-\u0444\u0430\u0439\u043b\u044b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 md-\u0444\u0430\u0439\u043b\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0438\u0442\u044c \u0431\u043b\u043e\u043a \u043a\u043e\u0434\u0430, \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c \u0435\u0433\u043e \u0442\u0435\u0433\u043e\u043c <code>mermaid<\/code> \u0438 \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432 \u043d\u0435\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u043a\u043e\u0434. \u0412\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440.<\/p>\n<pre><code class=\"markdown\">```mermaid ... \u043a\u043e\u0434 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b ... ```<\/code><\/pre>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u044d\u0442\u043e\u0433\u043e, \u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 <a href=\"https:\/\/mermaid-js.github.io\/mermaid-live-editor\/edit\/#pako:eNpNj80KwjAQhF9luzehfYEcKoKieO01lyXZ2kB-NE2QUvrupq2CexqGb4adGVXQjAJHfmX2is-GHpGc9FDuZI3ipm3vYfACbmxtgFXXMIQ3UGSYQj7u7Oo3hd0yAq6RKVX_NYe9peMtBZYSxwprdBwdGV1-mFdcYhrYsURRpOaesk0SpV8Kmp-6pC7apBBR9GRHrpFyCt3kFYoUM_-g747dXD76lkyo\" rel=\"noopener noreferrer nofollow\">\u0435\u0441\u0442\u044c<\/a> \u043e\u043d\u043b\u0430\u0439\u043d-\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043a\u043e\u0434\u0430 \u0441 \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u0432\u044b\u0432\u043e\u0434\u043e\u043c \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c. \u0418\u0437 \u043d\u0435\u0433\u043e \u0441\u0445\u0435\u043c\u044b \u043c\u043e\u0436\u043d\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 PNG \u0438 SVG. \u0414\u043b\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 IDE \u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u043e\u0432 \u043a\u043e\u0434\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u043b\u0438\u0431\u043e \u043d\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430, \u043b\u0438\u0431\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/652867\/\"> https:\/\/habr.com\/ru\/articles\/652867\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>14 \u0444\u0435\u0432\u0440\u0430\u043b\u044f 2022 \u0433\u043e\u0434\u0430 GitHub <a href=\"https:\/\/habr.com\/ru\/news\/t\/651569\/\" rel=\"noopener noreferrer nofollow\">\u043e\u0431\u044a\u044f\u0432\u0438\u043b\u0430<\/a> \u043e \u0441\u0442\u0430\u0440\u0442\u0435 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c Mermaid.js \u0432 README-\u0444\u0430\u0439\u043b\u0430\u0445 GitHub. \u041d\u043e\u0432\u043e\u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u043e\u043c\u043e\u0433\u043b\u043e \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0435\u0435 \u043e\u0444\u043e\u0440\u043c\u043b\u044f\u0442\u044c \u0431\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u044b \u0438 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0434\u043b\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438. \u0414\u043e \u044d\u0442\u043e\u0433\u043e \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u043b\u0438\u0441\u044c \u0432 \u0432\u0438\u0434\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u0435\u0441\u043b\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c, \u0442\u043e \u043d\u0430\u0434\u043e \u0431\u044b\u043b\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u0430 \u043f\u043e\u0442\u043e\u043c \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0435\u0433\u043e. \u0421\u0435\u0439\u0447\u0430\u0441 \u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a \u0432 \u043a\u043e\u0434\u0435 \u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u0433\u0440\u0430\u0444\u0438\u043a.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e GitHub, Mermaid.js \u043d\u0430\u0442\u0438\u0432\u043d\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u0432 GitLab, Gitea, Joplin \u0438 Notion. \u0422\u0430\u043a\u0436\u0435 \u0435\u0441\u0442\u044c \u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0434\u043b\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432. \u0414\u043b\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u043e\u0432 \u043a\u043e\u0434\u0430 \u0435\u0441\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b. \u0421 \u043f\u043e\u043b\u043d\u044b\u043c \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0432 <a href=\"https:\/\/github.com\/mermaid-js\/mermaid\/blob\/develop\/docs\/integrations.md\" rel=\"noopener noreferrer nofollow\">GitHub-\u043f\u0440\u043e\u0444\u0438\u043b\u0435<\/a> \u043f\u0440\u043e\u0435\u043a\u0442\u0430.\u00a0<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432\u0441\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b, \u0438\u043c\u0435\u044e\u0449\u0438\u0435\u0441\u044f \u0432 Mermaid \u0438 \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043c\u0441\u044f \u0441\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u043b\u043e\u043a-\u0441\u0445\u0435\u043c \u0432 README-\u0444\u0430\u0439\u043b\u0430\u0445.<\/p>\n<p>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435:<\/p>\n<ol>\n<li>\n<p><a href=\"#flowchart\" rel=\"noopener noreferrer nofollow\">\u0411\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u0430<\/a>;<\/p>\n<\/li>\n<li>\n<p><a href=\"#pie\" rel=\"noopener noreferrer nofollow\">\u041a\u0440\u0443\u0433\u043e\u0432\u044b\u0435 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b<\/a>;<\/p>\n<\/li>\n<li>\n<p><a href=\"#journey\" rel=\"noopener noreferrer nofollow\">\u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043f\u0443\u0442\u0438<\/a>;<\/p>\n<\/li>\n<li>\n<p><a href=\"#gantt\" rel=\"noopener noreferrer nofollow\">\u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u0413\u0430\u043d\u0442\u0430<\/a>;<\/p>\n<\/li>\n<li>\n<p><a href=\"#uml\" rel=\"noopener noreferrer nofollow\">UML-\u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430<\/a>;<\/p>\n<\/li>\n<li>\n<p><a href=\"#stateDiagram\" rel=\"noopener noreferrer nofollow\">\u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/a>;<\/p>\n<\/li>\n<li>\n<p><a href=\"#er\" rel=\"noopener noreferrer nofollow\">ER-\u043c\u043e\u0434\u0435\u043b\u044c<\/a>;<\/p>\n<\/li>\n<li>\n<p><a href=\"#sequenceDiagram\" rel=\"noopener noreferrer nofollow\">\u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/a>.<\/p>\n<\/li>\n<\/ol>\n<h2>\u0411\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u0430<\/h2>\n<p><a class=\"anchor\" name=\"flowchart\" id=\"flowchart\"><\/a><\/p>\n<p>\u0411\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u044b \u2014 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0439 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438. \u0427\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432. \u0411\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u044b \u043e\u0431\u044b\u0447\u043d\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 \u0443\u0437\u043b\u043e\u0432 \u0432 \u0432\u0438\u0434\u0435 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0444\u0438\u0433\u0443\u0440 \u0438 \u0441\u0442\u0440\u0435\u043b\u043e\u043a, \u0441\u043e\u0435\u0434\u0438\u043d\u044f\u044e\u0449\u0438\u0445 \u0443\u0437\u043b\u044b. Mermaid \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0431\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u044b.\u00a0<\/p>\n<p>\u0411\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 <code>flowchart<\/code> \u0438 \u0430\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0434\u043b\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u0418\u043c\u044f \u0443\u0437\u043b\u0430 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0443\u0436\u0435 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u0435. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u0430\u0436\u043d\u043e, \u0447\u0442\u043e \u043d\u0435\u043b\u044c\u0437\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0443\u0437\u0435\u043b \u0441 \u0438\u043c\u0435\u043d\u0435\u043c \u00abend\u00bb, \u0435\u0441\u043b\u0438 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0447\u0435\u0442\u0441\u044f, \u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u00abEnd\u00bb \u0438\u043b\u0438 \u00abEND\u00bb.<\/p>\n<pre><code>flowchart TB node<\/code><\/pre>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0431\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u044b, \u043a\u0430\u043a \u0443\u0436\u0435 \u0431\u044b\u043b\u043e \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u043e, \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0439 \u0430\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440\u044b. \u0412\u0441\u0435\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e 5 \u0430\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440:<\/p>\n<ul>\n<li>\n<p>TB \u2014 \u00abtop to bottom\u00bb, \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437;<\/p>\n<\/li>\n<li>\n<p>TD \u2014 \u00abtop-down\/ same as top to bottom\u00bb, \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437;<\/p>\n<\/li>\n<li>\n<p>BT \u2014 \u00abbottom to top\u00bb, \u0441\u043d\u0438\u0437\u0443 \u0432\u0432\u0435\u0440\u0445;<\/p>\n<\/li>\n<li>\n<p>RL \u2014 \u00abright to left\u00bb, \u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u043b\u0435\u0432\u043e;<\/p>\n<\/li>\n<li>\n<p>LR \u2014 \u00ableft to right\u00bb, \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u0443\u0437\u0435\u043b \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0442\u0435\u043a\u0441\u0442, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0441\u043b\u0435 \u0438\u043c\u0435\u043d\u0438 \u043d\u0430\u0434\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u0432 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0445 \u0441\u043a\u043e\u0431\u043a\u0430\u0445.<\/p>\n<pre><code>flowchart TB   node[\u0422\u0435\u043a\u0441\u0442 \u0432 \u0443\u0437\u043b\u0435]<\/code><\/pre>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0421\u0430\u043c\u0438 \u0443\u0437\u043b\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u044b\u043c\u0438. \u0424\u043e\u0440\u043c\u0430 \u0443\u0437\u043b\u0430 \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0441\u0438\u043c\u0432\u043e\u043b\u0430\u043c\u0438 \u0432\u043e\u043a\u0440\u0443\u0433 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0438\u0433\u0443\u0440\u044b:<\/p>\n<pre><code>flowchart TB   node1[\u0424\u043e\u0440\u043c\u0430 1]     node2(\u0424\u043e\u0440\u043c\u0430 2)   node3([\u0424\u043e\u0440\u043c\u0430 3])   node4[[\u0424\u043e\u0440\u043c\u0430 4]]   node5[(\u0424\u043e\u0440\u043c\u0430 5)]   node6((\u0424\u043e\u0440\u043c\u0430 6))   node7>\u0424\u043e\u0440\u043c\u0430 7]   node8{\u0424\u043e\u0440\u043c\u0430 8}   node9{{\u0424\u043e\u0440\u043c\u0430 9}}   node10[\/\u0424\u043e\u0440\u043c\u0430 10\/]   node11[\\\u0424\u043e\u0440\u043c\u0430 11\\]   node12[\/\u0424\u043e\u0440\u043c\u0430 12\\]   node13[\\\u0424\u043e\u0440\u043c\u0430 13\/]<\/code><\/pre>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0418\u043d\u043e\u0433\u0434\u0430 \u0432 \u0441\u0430\u043c\u043e\u043c \u0442\u0435\u043a\u0441\u0442\u0435 \u043d\u0430\u0434\u043e \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043c\u043e\u0433\u0443\u0442 \u0441\u043b\u043e\u043c\u0430\u0442\u044c \u0432\u0441\u044e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e. \u0414\u043b\u044f \u044d\u0442\u0438\u0445 \u0446\u0435\u043b\u0435\u0439 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u044d\u043a\u0440\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 \u0432\u0438\u0434\u0435 \u043a\u0430\u0432\u044b\u0447\u0435\u043a. \u0412\u0441\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0432 \u043a\u0430\u0432\u044b\u0447\u043a\u0430\u0445 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0437\u0430 \u0442\u0435\u043a\u0441\u0442. <\/p>\n<pre><code>flowchart LR     id1[\"\u042d\u0442\u043e \u0442\u0435\u043a\u0441\u0442 (\u0430 \u0432\u043e\u0442 \u044d\u0442\u043e \u043c\u043e\u0433\u043b\u043e \u0441\u043b\u043e\u043c\u0430\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433), \u043d\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u044d\u043a\u0440\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\"]<\/code><\/pre>\n<p>\u0423\u0437\u043b\u044b \u0432 \u0431\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u0435 \u0441\u043e\u0435\u0434\u0438\u043d\u044f\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0440\u0435\u043b\u043e\u043a \u0438 \u043b\u0438\u043d\u0438\u0439. \u0412 \u043a\u043e\u0434\u0435 \u043e\u043d\u0438 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code>flowchart TB \u0410 --> B C --- D E -.-> F G ==> H I --o J K --x L<\/code><\/pre>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0422\u0430\u043a \u0436\u0435 \u043a\u0430\u043a \u0438 \u0432 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u0431\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u0435, \u0432 Mermaid \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441 \u0438\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u043d\u0430 \u0441\u0442\u0440\u0435\u043b\u043a\u0430\u0445 \u0438 \u0441\u0432\u044f\u0437\u044f\u0445 \u0443\u0437\u043b\u043e\u0432. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0432\u0432\u0435\u0441\u0442\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u0441\u0442\u0440\u0435\u043b\u043a\u0438:<\/p>\n<pre><code>flowchart TD     A-- Text ---B     C---|Text|D      E-->|text|F      G-- text -->H      I-. text .-> J      K == text ==> L<\/code><\/pre>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434\u0431\u0438\u0440\u0430\u0435\u0442 \u0434\u043b\u0438\u043d\u0443 \u0441\u0442\u0440\u0435\u043b\u043e\u043a \u0438 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0439, \u043d\u043e \u0435\u0441\u043b\u0438 \u043d\u0430\u0434\u043e \u044f\u0432\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0434\u043b\u0438\u043d\u0443, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0434\u0435\u0444\u0438\u0441\u043e\u0432.<\/p>\n<p>\u0417\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0431\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0434\u0432\u0443\u0445 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432. \u0414\u043b\u044f \u044d\u0442\u0438\u0445 \u0446\u0435\u043b\u0435\u0439 \u043f\u043e\u0434\u043e\u0439\u0434\u0443\u0442 \u043f\u043e\u0434\u0441\u0445\u0435\u043c\u044b, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439 \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0440\u0438\u0441\u0443\u043d\u043a\u0435. \u0417\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u043e\u043d\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0435\u0439:<\/p>\n<pre><code>subgraph \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435     \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0433\u0440\u0430\u0444\u0430 end<\/code><\/pre>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code>flowchart TB     c1-->a2     subgraph one     a1-->a2     end     subgraph two     b1-->b2     end     subgraph three     c1-->c2     end<\/code><\/pre>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0423\u0437\u0435\u043b \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u043e\u0439, \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0434\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443 \u0432 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u0443\u0437\u043b\u0430. \u0421\u0441\u044b\u043b\u043a\u0443 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u044d\u043a\u0440\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0432\u044b\u0447\u043a\u0430\u043c\u0438:<\/p>\n<pre><code>flowchart TB %% \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0443\u0437\u0435\u043b     A --> B  %% \u041a\u0441\u0442\u0430\u0442\u0438 \u0434\u0430, \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0434\u0432\u0443\u043c\u044f \u0437\u043d\u0430\u043a\u0430\u043c\u0438 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430 %% \u041e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0434\u043b\u044f \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u0443\u0437\u043b\u0443  click A \"http:\/\/www.github.com\"<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0443\u0437\u0435\u043b A \u0441\u0442\u0430\u043d\u0435\u0442 \u043a\u043b\u0438\u043a\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u043c \u0438 \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0430\u044f\u0441\u044f \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435. \u041d\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u0441\u044b\u043b\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0432 \u043a\u043e\u043d\u0446\u0435 \u0441\u0441\u044b\u043b\u043a\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e <code>_blank<\/code>.<\/p>\n<pre><code>flowchart TB     A --> B      click A \"http:\/\/www.github.com\" _blank<\/code><\/pre>\n<p>\u0423\u0437\u043b\u0430\u043c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0432\u0437\u044f\u0442\u043e\u0433\u043e \u0443\u0437\u043b\u0430 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0446\u0432\u0435\u0442. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0441\u043b\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0431\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e <code>style<\/code>, \u043f\u043e\u0441\u043b\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0438\u043c\u044f \u0443\u0437\u043b\u0430, \u0430 \u043f\u043e\u0442\u043e\u043c \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0446\u0432\u0435\u0442\u043e\u0432\u0443\u044e \u0441\u0445\u0435\u043c\u0443. \u0426\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u0441\u0445\u0435\u043c\u0430 \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0442\u0435\u0433\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>fill \u2014 \u0437\u0430\u043b\u0438\u0432\u043a\u0430;<\/p>\n<\/li>\n<li>\n<p>stroke \u2014 \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b;<\/p>\n<\/li>\n<li>\n<p>stroke-width \u2014 \u0442\u043e\u043b\u0449\u0438\u043d\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b;<\/p>\n<\/li>\n<li>\n<p>color \u2014 \u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430;<\/p>\n<\/li>\n<li>\n<p>stroke-dasharray \u2014 \u043f\u0443\u043d\u043a\u0442\u0438\u0440\u043d\u0430\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430.<\/p>\n<\/li>\n<\/ul>\n<pre><code>flowchart LR     id1(Start)-->id2(Stop)     style id1 fill:#3f3,stroke:#333,stroke-width:4px     style id2 fill:#ff2400,stroke:#333,stroke-width:4px,color:#fff,stroke-dasharray: 12 5<\/code><\/pre>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0415\u0441\u043b\u0438 \u0431\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u0430 \u0431\u043e\u043b\u044c\u0448\u0430\u044f, \u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0440\u0430\u0441\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0438\u0445. \u041a\u043b\u0430\u0441\u0441 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 <code>classDef<\/code>, \u0434\u0430\u043b\u0435\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 \u0438 \u0442\u0435\u0433\u0438 \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u043f\u044f\u0442\u0443\u044e. \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0442\u0438\u043b\u044c \u043c\u043e\u0436\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0440\u0435\u0445 \u0434\u0432\u043e\u0435\u0442\u043e\u0447\u0438\u0439 \u043f\u043e\u0441\u043b\u0435 \u0438\u043c\u0435\u043d\u0438 \u0443\u0437\u043b\u0430 (<code>:::<\/code>).<\/p>\n<pre><code>flowchart LR     classDef class1 fill:#3f3,stroke:#333,stroke-width:4px     classDef class2 fill:#ff2400,stroke:#333,stroke-width:4px,color:#fff,stroke-dasharray: 12 5          A:::class1 --> B:::class2<\/code><\/pre>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0432\u0441\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u043e\u0442 \u0442\u0430\u043a\u0443\u044e \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u0443\u044e \u0431\u043b\u043e\u043a-\u0441\u0445\u0435\u043c\u0443.<\/p>\n<pre><code>flowchart TD     classDef class1 fill:#7FFFD4, stroke:#000, stroke-width:4px      A([\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430]):::class1     B{\u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f?}:::class1     A--->B     B--\u0414\u0430-->C([\u041b\u0443\u0447\u0448\u0435 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f Mermaid.js]):::class1      B--\u041d\u0435\u0442-->D([\u041c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0438 \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Markdown]):::class1<\/code><\/pre>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h2>\u041a\u0440\u0443\u0433\u043e\u0432\u044b\u0435 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b<\/h2>\n<p><a class=\"anchor\" name=\"pie\" id=\"pie\"><\/a><\/p>\n<p>\u041a\u0440\u0443\u0433\u043e\u0432\u0430\u044f \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u2014 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u0430\u043a\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043e\u0442 \u043e\u0431\u0449\u0435\u0433\u043e \u0447\u0438\u0441\u043b\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438. \u0412 Mermaid \u043a\u0440\u0443\u0433\u043e\u0432\u044b\u0435 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 <code>pie<\/code>, \u0434\u0430\u043b\u0435\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0441\u043b\u043e\u0432\u043e <code>title<\/code>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u0435 \u0437\u0430\u0434\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u0438 \u0441\u0442\u0440\u043e\u043a\u0430 \u0441 \u0441\u0430\u043c\u0438\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c. \u041d\u043e titlte \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0438 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0442\u043e\u0433\u0434\u0430 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u0431\u0443\u0434\u0435\u0442 \u0431\u0435\u0437\u044b\u043c\u044f\u043d\u043d\u043e\u0439.<\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0435 \u0432 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0443 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<ul>\n<li>\n<p>\u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0432 \u043a\u0430\u0432\u044b\u0447\u043a\u0430\u0445;<\/p>\n<\/li>\n<li>\n<p>\u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u044c \u0432 \u0432\u0438\u0434\u0435 \u0434\u0432\u043e\u0435\u0442\u043e\u0447\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 (\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u043e \u0434\u0432\u0443\u0445 \u0437\u043d\u0430\u043a\u043e\u0432 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u044f\u0442\u043e\u0439).<\/p>\n<\/li>\n<\/ul>\n<pre><code>pie title \u041f\u0440\u043e\u0434\u0430\u0436\u0438 \u043b\u0435\u0433\u043a\u0438\u0445 \u0437\u0430\u043a\u0443\u0441\u043e\u043a \u0437\u0430 \u0434\u0435\u043a\u0430\u0431\u0440\u044c 2021     \"\u0421\u0435\u043d\u0434\u0432\u0438\u0447\u0438\" : 223     \"\u0421\u0430\u043b\u0430\u0442\u044b\" : 50     \"\u041a\u0430\u043d\u0430\u043f\u0435\" : 100<\/code><\/pre>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h2>\u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043f\u0443\u0442\u0438<\/h2>\n<p><a class=\"anchor\" name=\"journey\" id=\"journey\"><\/a><\/p>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043f\u0443\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043a\u0430\u0436\u0434\u044b\u0439 \u0442\u0438\u043f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u043c \u0438\u043b\u0438 \u0432\u0435\u0431 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c. \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0441\u0445\u0435\u043c \u0432 Mermaid \u0435\u0441\u0442\u044c \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e <code>journey<\/code>, <code>title<\/code> \u0442\u0430\u043a\u0436\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0432\u0441\u0435\u0439 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>section<\/code> \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u0434\u0435\u043b\u044b. \u0412 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0448\u0430\u0433\u0438 \u0441 \u043e\u0446\u0435\u043d\u043a\u043e\u0439 \u043f\u043e \u0434\u0435\u0441\u044f\u0442\u0438\u0431\u0430\u043b\u043b\u044c\u043d\u043e\u0439 \u0448\u043a\u0430\u043b\u0435 \u0438 \u0437\u0430\u043a\u0440\u0435\u043f\u043b\u0435\u043d\u043d\u044b\u043c \u0437\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435\u043c \u043b\u0438\u0446\u043e\u043c. \u0412\u0441\u0435 \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u044c \u0432 \u0432\u0438\u0434\u0435 \u0434\u0432\u043e\u0435\u0442\u043e\u0447\u0438\u044f.<\/p>\n<pre><code>journey     title \u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438     section \u041f\u043e\u0438\u0441\u043a \/ \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435       \u041f\u043e\u0438\u0441\u043a \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438: 5: \u042f       \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435: 5: \u042f     section \u041f\u0438\u0448\u0435\u043c       \u041f\u0438\u0448\u0435\u043c \u0447\u0435\u0440\u043d\u043e\u0432\u0438\u043a: 5: \u042f       \u0413\u043e\u0442\u043e\u0432\u0438\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438: 4: \u042f     section \u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c         \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c: 3: \u042f         \u0424\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0430\u0432\u043a\u0438: 2: \u042f     section \u041f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044f         \u041f\u0443\u0431\u043b\u0438\u043a\u0443\u0435\u043c: 5: \u042f         \u0420\u0430\u0434\u0443\u0435\u043c\u0441\u044f: 8: \u042f, \u041c\u043e\u0439 \u043a\u043e\u0442<\/code><\/pre>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h2>\u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u0413\u0430\u043d\u0442\u0430<\/h2>\n<p><a class=\"anchor\" name=\"gantt\" id=\"gantt\"><\/a><\/p>\n<p>\u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u0413\u0430\u043d\u0442\u0430 \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c. \u041e\u0431\u044b\u0447\u043d\u043e \u0442\u0430\u043a\u0430\u044f \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u2014 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0448\u043a\u0430\u043b\u044b \u0438 \u0437\u0430\u0434\u0430\u0447. \u041f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0432\u0438\u0434\u044b \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b \u0438 \u043f\u0435\u0440\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b\u0438 \u0430\u0436 \u0432 1910 \u0433\u043e\u0434\u0443, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0437\u0430 \u0431\u043e\u043b\u0435\u0435 \u0447\u0435\u043c \u0441\u043e\u0442\u043d\u044e \u043b\u0435\u0442 \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u044b\u0435 \u0432\u0438\u0434\u044b. \u041d\u043e \u0443 \u0432\u0441\u0435\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0434\u043d\u0430 \u0438 \u0442\u0430\u0436\u0435 \u0437\u0430\u0434\u0430\u0447\u0430.\u00a0<\/p>\n<p>\u0412 Mermaid \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u0413\u0430\u043d\u0442\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u2014 \u043d\u0430 \u043e\u0441\u0438 X \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0448\u043a\u0430\u043b\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0430 \u043d\u0430 \u043e\u0441\u0438 Y \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0438\u0445 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f. \u0422\u0430\u043a\u043e\u0439 \u0432\u0438\u0434 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u043c \u0441\u043b\u043e\u0432\u043e\u043c <code>gantt<\/code>, \u0432 <code>title<\/code> \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435. \u0414\u0430\u043b\u0435\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0444\u043e\u0440\u043c\u0430\u0442 \u0434\u0430\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0439 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b (<code>dateFormat<\/code>). \u0420\u0430\u0437\u0434\u0435\u043b\u044b \u043f\u043e \u043e\u0441\u0438 Y \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 <code>section<\/code> \u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0430. \u0410 \u0434\u0430\u043b\u0435\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0441\u0430\u043c\u0438 \u0437\u0430\u0434\u0430\u0447\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 \u043a\u043e\u0440\u043e\u0442\u043a\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430 \u0437\u0430\u0434\u0430\u0447\u0438, \u0438\u043c\u0435\u043d\u0438, \u0434\u0430\u0442\u044b \u043d\u0430\u0447\u0430\u043b\u0430 \u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0442\u0435\u043a\u0441\u0442 \u0437\u0430\u0434\u0430\u0447\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u0441 \u043b\u0435\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438, \u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0441 \u043f\u0440\u0430\u0432\u043e\u0439 \u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0437\u0430\u043f\u044f\u0442\u043e\u0439. \u0427\u0435\u0440\u0435\u0437 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e after \u043c\u043e\u0436\u043d\u043e \u044f\u0432\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u0434\u0430\u0447 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0440\u0430\u0437\u0434\u0435\u043b\u0430, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0442\u043e \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0441\u0430\u043c\u0430 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442 \u0438\u0445 \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443. <\/p>\n<pre><code>gantt     title \u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u0413\u0430\u043d\u0442\u0430     dateFormat  YYYY-MM-DD     section \u0421\u0435\u043a\u0446\u0438\u044f 1     \u0417\u0430\u0434\u0430\u0447\u0430 1         :a1, 2014-01-01, 15d     \u0417\u0430\u0434\u0430\u0447\u0430 2         :20d     section \u0421\u0435\u043a\u0446\u0438\u044f 2     \u0417\u0430\u0434\u0430\u0447\u0430 1         :2014-01-12  , 12d     \u0417\u0430\u0434\u0430\u0447\u0430 2         : 24d<\/code><\/pre>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043d\u0430 \u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435:<\/p>\n<ul>\n<li>\n<p><code>crit<\/code> \u2014 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432\u0430\u0436\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438;<\/p>\n<\/li>\n<li>\n<p><code>active<\/code> \u2014 \u0437\u0430\u0434\u0430\u0447\u0438 \u0432 \u0440\u0430\u0431\u043e\u0442\u0435;<\/p>\n<\/li>\n<li>\n<p><code>done<\/code> \u2014 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438;<\/p>\n<\/li>\n<li>\n<p><code>milestone<\/code> \u2014 \u0432\u0435\u0445\u0438 (\u0435\u0434\u0438\u043d\u0438\u0447\u043d\u044b\u0435 \u0432\u0430\u0436\u043d\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f).<\/p>\n<\/li>\n<\/ul>\n<pre><code>gantt     title \u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u0413\u0430\u043d\u0442\u0430     dateFormat  YYYY-MM-DD     section \u0421\u0435\u043a\u0446\u0438\u044f 1     Milestone   :milestone, a1, 2014-01-01, 15d     Crit        :crit, a2, 2014-01-01, 15d      Active      :active, a3, 2014-01-01, 15d     Done        :done, a4, 2014-01-01, 15d<\/code><\/pre>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h2>UML-\u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b<\/h2>\n<p><a class=\"anchor\" name=\"uml\" id=\"uml\"><\/a><\/p>\n<p>UML-\u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u0445\u0435\u043c\u0430\u0442\u0438\u0447\u043d\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438 \u0438\u0445 \u0441\u0432\u044f\u0437\u0435\u0439 \u0432 \u043a\u043e\u0434\u0435. Mermaid \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 <code>classDiagram<\/code>. \u041a\u0430\u0436\u0434\u044b\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0442\u0440\u0438 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435:<\/p>\n<ul>\n<li>\n<p>\u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 \u0438 \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0432 \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043a\u043b\u0430\u0441\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u043e \u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0439 \u0431\u0443\u043a\u0432\u044b \u0438 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u043b\u0435\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e;<\/p>\n<\/li>\n<li>\n<p>\u0432 \u043d\u0438\u0436\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u044b \u043c\u0435\u0442\u043e\u0434\u044b \u043a\u043b\u0430\u0441\u0441\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0415\u0441\u0442\u044c \u0434\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-384689","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/384689","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=384689"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/384689\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=384689"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=384689"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=384689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}