marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-21 16:29:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: apply linting to html ext too and fixes for files

Browse Source
This commit is contained in:
Yash-Singh1
2021-12-04 15:28:40 -08:00
parent c11f9b7e5f
commit 3ea974709f
47 changed files with 21256 additions and 36208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

270
docs/index.html
View File

@@ -1,141 +1,167 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
<link rel="stylesheet" href="theme.css">
<script src="//cdn.jsdelivr.net/npm/mermaid@8.13.0/dist/mermaid.min.js"></script>
<!-- <script src="http://localhost:9000/mermaid.js"></script> -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<head>
<meta charset="UTF-8" />
<title>
mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams,
gantt charts and git graphs.
</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta
name="description"
content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs."
/>
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
<link rel="stylesheet" href="theme.css" />
<script src="//cdn.jsdelivr.net/npm/mermaid@8.13.0/dist/mermaid.min.js"></script>
<!-- <script src="http://localhost:9000/mermaid.js"></script> -->
<script>
// prettier-ignore
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-153180559-1', 'auto');
if(location) {
ga('send', 'pageview', location.hash);
}
ga('create', 'UA-153180559-1', 'auto');
if (location) {
ga('send', 'pageview', location.hash);
}
</script>
<script>
var require = {
paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs' },
};
</script>
<script>var require = { paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs' } }</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/loader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.nls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.js"></script>
<script>exports = {};</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.js"></script>
<script>
exports = {};
</script>
<script src="https://unpkg.com/monaco-mermaid/browser.js"></script>
<style>
.markdown-section {
max-width: 1200px;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
var initEditor = exports.default;
var parser = new DOMParser();
var currentCodeExample = 0;
var colorize = [];
<style>
.markdown-section {
max-width: 1200px;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
var initEditor = exports.default;
var parser = new DOMParser();
var currentCodeExample = 0;
var colorize = [];
function colorizeEverything(html) {
initEditor(monaco)
return new Promise((resolve, reject) => {
monaco.editor.setTheme('mermaid')
var parsed = parser.parseFromString(html, 'text/html').body
Promise.all([...parsed.querySelectorAll('pre[id*="code"]')].map(codeBlock => monaco.editor.colorize(codeBlock.innerText, 'mermaid'))).then(result => {
parsed.querySelectorAll('pre[id*="code"]').forEach((codeBlock, index) => codeBlock.innerHTML = result[index])
resolve(parsed.innerHTML)
})
})
}
function colorizeEverything(html) {
initEditor(monaco);
return new Promise((resolve, reject) => {
monaco.editor.setTheme('mermaid');
var parsed = parser.parseFromString(html, 'text/html').body;
Promise.all(
[...parsed.querySelectorAll('pre[id*="code"]')].map((codeBlock) =>
monaco.editor.colorize(codeBlock.innerText, 'mermaid')
)
).then((result) => {
parsed
.querySelectorAll('pre[id*="code"]')
.forEach((codeBlock, index) => (codeBlock.innerHTML = result[index]));
resolve(parsed.innerHTML);
});
});
}
function escapeHTML(html) {
return html.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll('\'', '&apos;')
}
function escapeHTML(html) {
return html
.replaceAll('&', '&amp;')
.replaceAll('<', '&lt;')
.replaceAll('>', '&gt;')
.replaceAll('"', '&quot;')
.replaceAll("'", '&apos;');
}
window.$docsify = {
search: 'auto',
name: 'mermaid',
repo: 'https://github.com/mermaid-js/mermaid',
loadSidebar: true,
mergeNavbar: true,
maxLevel: 4,
subMaxLevel: 2,
markdown: {
renderer: {
code: function(code, lang) {
if (lang.startsWith('mermaid') || lang === 'mmd') {
var resultingHTML = '';
if (lang === "mmd" || lang === 'mermaid-example') {
currentCodeExample++;
colorize.push(currentCodeExample);
resultingHTML += (
'<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>'
)
window.$docsify = {
search: 'auto',
name: 'mermaid',
repo: 'https://github.com/mermaid-js/mermaid',
loadSidebar: true,
mergeNavbar: true,
maxLevel: 4,
subMaxLevel: 2,
markdown: {
renderer: {
code: function (code, lang) {
if (lang.startsWith('mermaid') || lang === 'mmd') {
var resultingHTML = '';
if (lang === 'mmd' || lang === 'mermaid-example') {
currentCodeExample++;
colorize.push(currentCodeExample);
resultingHTML +=
'<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>';
}
if (lang === 'mermaid' || lang === 'mermaid-example') {
resultingHTML +=
'<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</div>';
}
if (resultingHTML !== '') {
return resultingHTML;
}
}
if (lang === 'mermaid' || lang === 'mermaid-example') {
resultingHTML += (
'<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + "</div>"
return this.origin.code.apply(this, arguments);
},
},
},
plugins: [
function (hook, vm) {
hook.beforeEach(function (html) {
url = 'https://github.com/mermaid-js/mermaid/blob/develop/docs/' + vm.route.file;
var editHtml = '[:memo: Edit this Page](' + url + ')\n';
return editHtml + html;
});
hook.afterEach(function (html, next) {
next(html);
(async () => {
while (!window.hasOwnProperty('monaco'))
await new Promise((resolve) => setTimeout(resolve, 1000));
colorizeEverything(html).then(
(newHTML) => (document.querySelector('article.markdown-section').innerHTML = newHTML)
);
}
})();
});
},
],
};
if (resultingHTML !== '') {
return resultingHTML;
}
}
return this.origin.code.apply(this, arguments);
}
var num = 0;
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
const conf = {
logLevel: 4,
startOnLoad: false,
themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
};
if (isDarkMode) conf.theme = 'dark';
mermaid.initialize(conf);
</script>
<script>
window.onhashchange = function (a) {
//code
if (location) {
ga('send', 'pageview', location.hash);
}
},
plugins: [
function (hook, vm) {
hook.beforeEach(function (html) {
url = 'https://github.com/mermaid-js/mermaid/blob/develop/docs/' + vm.route.file
var editHtml = '[:memo: Edit this Page](' + url + ')\n'
return editHtml + html
})
hook.afterEach(function (html, next) {
next(html);
(async() => {
while (!window.hasOwnProperty("monaco"))
await new Promise(resolve => setTimeout(resolve, 1000));
colorizeEverything(html).then(newHTML => document.querySelector('article.markdown-section').innerHTML = newHTML)
})();
})
}
]
}
var num = 0;
const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
const conf = { logLevel:4, startOnLoad: false, themeCSS:'.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }' };
if(isDarkMode && false) conf.theme = 'dark';
mermaid.initialize(conf);
</script>
<script>
window.onhashchange = function(a) {
//code
if(location) {
ga('send', 'pageview', location.hash);
}
}
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script>
</body>
</html>
<!-- -->
};
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script>
</body>
</html>

235
docs/landing/index.html
View File

@@ -4,11 +4,15 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>
The Official Guide to Mermaid.js
</title>
<meta name="description" content="Landing page for the book The Official Guide to Mermaid.js: Create complex diagrams and beautiful flowcharts easily using text and code" />
<meta name="keywords" content="book, guide, mermaid, flowcharts, sequence diagrams, class diagrams, state diagrams, pie charts, Entity Relationship Diagrams, User Journey Diagrams, Requirement Diagrams, Gantt Charts" />
<title>The Official Guide to Mermaid.js</title>
<meta
name="description"
content="Landing page for the book The Official Guide to Mermaid.js: Create complex diagrams and beautiful flowcharts easily using text and code"
/>
<meta
name="keywords"
content="book, guide, mermaid, flowcharts, sequence diagrams, class diagrams, state diagrams, pie charts, Entity Relationship Diagrams, User Journey Diagrams, Requirement Diagrams, Gantt Charts"
/>
<meta name="author" content="Knut Sveidqvist, Ashish Jain" />
<link rel="stylesheet" href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" />
<!--Replace with your tailwind.css once created-->
@@ -16,43 +20,82 @@
<!-- Define your gradient here - use online tools to find a gradient matching your branding-->
<style>
.gradient {
background: linear-gradient(90deg, #7557C9 0%, #f4f4f4 100%);
background: linear-gradient(90deg, #7557c9 0%, #f4f4f4 100%);
}
.p-shadow {
text-shadow: #7557c9 0px 0px 5px
text-shadow: #7557c9 0px 0px 5px;
}
</style>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
// prettier-ignore
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-153180559-1', 'auto');
ga('send', 'pageview');
ga('create', 'UA-153180559-1', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
</head>
<body class="leading-normal tracking-normal text-white gradient" style="font-family: 'Source Sans Pro', sans-serif;">
<body
class="leading-normal tracking-normal text-white gradient"
style="font-family: 'Source Sans Pro', sans-serif"
>
<!--Nav-->
<!--Hero-->
<div class="pt-24">
<div style="" class="container lg:px-24 max-w-5xl px-4 mx-auto flex flex-wrap flex-col md:flex-row items-center">
<div
style=""
class="
container
lg:px-24
max-w-5xl
px-4
mx-auto
flex flex-wrap flex-col
md:flex-row
items-center
"
>
<!--Left Col-->
<div class="w-full md:w-1/2">
<div class="flex flex-col justify-center items-start text-center md:text-left">
<div class="flex flex-col justify-center items-start text-center md:text-left">
<div class="flex flex-col items-center">
<p class="uppercase tracking-loose w-full p-shadow">MermaidPress</p>
<h1 class="my-4 text-5xl font-bold leading-tight p-shadow">
The Official Guide to Mermaid.js
</h1>
<p class="leading-normal text-2xl mb-8 p-shadow">
Learn to create complex diagrams and beautiful flowcharts easily using text and code using Mermaid.js.
Learn to create complex diagrams and beautiful flowcharts easily using text and code
using Mermaid.js.
</p>
<a href="https://www.amazon.com/Official-Guide-Mermaid-js-beautiful-flowcharts-dp-1801078025/dp/1801078025/ref=mt_other?_encoding=UTF8&me=&qid=1628153965">
<button style="background: #FFA41C;border: 1px solid #FF8F00;" class="mx-auto lg:mx-0 hover:underline text-black font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out">
<a
href="https://www.amazon.com/Official-Guide-Mermaid-js-beautiful-flowcharts-dp-1801078025/dp/1801078025/ref=mt_other?_encoding=UTF8&me=&qid=1628153965"
>
<button
style="background: #ffa41c; border: 1px solid #ff8f00"
class="
mx-auto
lg:mx-0
hover:underline
text-black
font-bold
rounded-full
my-6
py-4
px-8
shadow-lg
focus:outline-none focus:shadow-outline
transform
transition
hover:scale-105
duration-300
ease-in-out
"
>
Purchase on Amazon
</button>
</a>
@@ -66,15 +109,27 @@
</div>
</div>
<div class="relative -mt-0 lg:-mt-12">
<svg viewBox="0 0 1428 174" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg
viewBox="0 0 1428 174"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2.000000, 44.000000)" fill="#FFFFFF" fill-rule="nonzero">
<path d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496" opacity="0.100000001"></path>
<path
d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496"
opacity="0.100000001"
></path>
<path
d="M100,104.708498 C277.413333,72.2345949 426.147877,52.5246657 546.203633,45.5787101 C666.259389,38.6327546 810.524845,41.7979068 979,55.0741668 C931.069965,56.122511 810.303266,74.8455141 616.699903,111.243176 C423.096539,147.640838 250.863238,145.462612 100,104.708498 Z"
opacity="0.100000001"
></path>
<path d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z" id="Path-4" opacity="0.200000003"></path>
<path
d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z"
id="Path-4"
opacity="0.200000003"
></path>
</g>
<g transform="translate(-4.000000, 76.000000)" fill="#FFFFFF" fill-rule="nonzero">
<path
@@ -87,7 +142,8 @@
<section class="bg-white border-b py-8">
<div class="container max-w-5xl mx-auto m-8">
<h2 class="w-full my-2 text-5xl font-bold leading-tight text-center text-gray-800">
Get up to speed with using Mermaid diagrams along with real-world examples and expert tips from the authors to facilitate a seamless development workflow
Get up to speed with using Mermaid diagrams along with real-world examples and expert tips
from the authors to facilitate a seamless development workflow
</h2>
<div class="w-full mb-4">
<div class="h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t"></div>
@@ -95,7 +151,8 @@
<div class="flex flex-wrap">
<div class="w-full sm:w-1/2 p-6 flex items-center">
<p class="text-3xl text-gray-800 font-normal leading-none mb-3">
Flowcharts is a diagram type that visualizes a process or an algorithm by showing the steps in order, as well as the different paths the execution can take.
Flowcharts is a diagram type that visualizes a process or an algorithm by showing the
steps in order, as well as the different paths the execution can take.
</p>
</div>
<div class="w-full sm:w-1/2 p-6 flex justify-center items-center">
@@ -103,13 +160,14 @@
</div>
</div>
<div class="flex flex-wrap flex-col-reverse sm:flex-row flex justify-center items-center">
<div class="w-full sm:w-1/2 p-6 mt-6 ">
<div class="w-full sm:w-1/2 p-6 mt-6">
<img class="z-50 w-full" style="" src="sequence-diagram.png" />
</div>
<div class="w-full sm:w-1/2 p-6 mt-6">
<div class="align-middle flex items-center">
<p class="text-3xl text-gray-800 font-normal leading-none mb-3">
Sequence diagrams lets you model and visualize interactions between different actors or objects in a system, as well as the order of those interactions
Sequence diagrams lets you model and visualize interactions between different actors
or objects in a system, as well as the order of those interactions
</p>
</div>
</div>
@@ -118,7 +176,7 @@
<div class="w-full sm:w-1/2 p-6 flex items-center">
<p class="text-3xl text-gray-800 font-normal leading-none mb-3">
A class diagram is a graphical representation that is used to visualize and describe
an object-oriented system.
an object-oriented system.
</p>
</div>
<div class="w-full sm:w-1/2 p-6 flex justify-center items-center">
@@ -126,13 +184,14 @@ an object-oriented system.
</div>
</div>
<div class="flex flex-wrap flex-col-reverse sm:flex-row flex justify-center items-center">
<div class="w-full sm:w-1/2 p-6 mt-6 ">
<div class="w-full sm:w-1/2 p-6 mt-6">
<img class="z-50 w-full" style="" src="er.png" />
</div>
<div class="w-full sm:w-1/2 p-6 mt-6">
<div class="align-middle flex items-center">
<p class="text-3xl text-gray-800 font-normal leading-none mb-3">
An entity-relationship diagram is a graphical representation that is used to visualize the different types of entities that exist within a system.
An entity-relationship diagram is a graphical representation that is used to
visualize the different types of entities that exist within a system.
</p>
</div>
</div>
@@ -140,7 +199,8 @@ an object-oriented system.
<div class="flex flex-wrap">
<div class="w-full sm:w-1/2 p-6 flex items-center">
<p class="text-3xl text-gray-800 font-normal leading-none mb-3">
Use State diagrams to model and document state machines, an abstract way of representing a system or an algorithm.
Use State diagrams to model and document state machines, an abstract way of
representing a system or an algorithm.
</p>
</div>
<div class="w-full sm:w-1/2 p-6 flex justify-center items-center">
@@ -148,19 +208,22 @@ an object-oriented system.
</div>
</div>
<div class="flex flex-wrap flex-col-reverse sm:flex-row flex justify-center items-center">
<div class="w-full sm:w-1/2 p-6 mt-6 ">
<div class="w-full sm:w-1/2 p-6 mt-6">
<img class="z-50 w-full" style="" src="gantt.png" />
</div>
<div class="w-full sm:w-1/2 p-6 mt-6">
<div class="align-middle flex items-center">
<p class="text-3xl text-gray-800 font-normal leading-none mb-3">
A Gantt chart is a graphical representation that is used to visualize and describe tasks (events or activities) over time.
A Gantt chart is a graphical representation that is used to visualize and describe
tasks (events or activities) over time.
</p>
</div>
</div>
</div>
</div>
<p class="text-3xl text-gray-800 font-normal leading-none mt-3 text-center">These were a few of the diagrams supported by Mermaid.</p>
<p class="text-3xl text-gray-800 font-normal leading-none mt-3 text-center">
These were a few of the diagrams supported by Mermaid.
</p>
</section>
<section class="bg-gray-100 border-b py-8">
@@ -169,10 +232,32 @@ an object-oriented system.
Book description
</h1>
<div class="w-full mb-4">
<p class="text-black mb-4">Mermaid lets you represent diagrams using text and code which simplifies the maintenance of complex diagrams. This is a great option for developers as they’re more familiar with code, rather than special tools for generating diagrams. Besides, diagrams in code simplify maintenance and ensure that the code is supported by version control systems. In some cases, Mermaid makes refactoring support for name changes possible while also enabling team collaboration for review distribution and updates.</p>
<p class="text-black mb-4">Developers working with any system will be able to put their knowledge to work with this practical guide to using Mermaid for documentation. The book is also a great reference for looking up the syntax for specific diagrams when authoring diagrams.</p>
<p class="text-black mb-4">You’ll start by getting up to speed with the importance of accurate and visual documentation. Next, the book introduces Mermaid and establishes how to use it to create effective documentation. By using different tools, editors, or a custom documentation platform, you’ll also learn how to use Mermaid syntax for various diagrams. Later chapters cover advanced configuration settings and theme options to manipulate your diagram as per your needs.</p>
<p class="text-black mb-4">By the end of this Mermaid book, you’ll have become well-versed with the different types of Mermaid diagrams and how they can be used in your workflows.</p>
<p class="text-black mb-4">
Mermaid lets you represent diagrams using text and code which simplifies the maintenance
of complex diagrams. This is a great option for developers as they’re more familiar with
code, rather than special tools for generating diagrams. Besides, diagrams in code
simplify maintenance and ensure that the code is supported by version control systems.
In some cases, Mermaid makes refactoring support for name changes possible while also
enabling team collaboration for review distribution and updates.
</p>
<p class="text-black mb-4">
Developers working with any system will be able to put their knowledge to work with this
practical guide to using Mermaid for documentation. The book is also a great reference
for looking up the syntax for specific diagrams when authoring diagrams.
</p>
<p class="text-black mb-4">
You’ll start by getting up to speed with the importance of accurate and visual
documentation. Next, the book introduces Mermaid and establishes how to use it to create
effective documentation. By using different tools, editors, or a custom documentation
platform, you’ll also learn how to use Mermaid syntax for various diagrams. Later
chapters cover advanced configuration settings and theme options to manipulate your
diagram as per your needs.
</p>
<p class="text-black mb-4">
By the end of this Mermaid book, you’ll have become well-versed with the different types
of Mermaid diagrams and how they can be used in your workflows.
</p>
</div>
</div>
</section>
<section class="bg-white py-8">
@@ -187,12 +272,25 @@ an object-oriented system.
<div class="flex flex-col mx-4 rounded-lg bg-white mt-4 sm:-mt-6 shadow-lg z-10">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow">
<ul class="w-full text-base font-bold px-4">
<li class="border-b py-4 px-4">Understand good and bad documentation, and the art of effective documentation</li>
<li class="border-b py-4 px-4">Become well-versed with maintaining complex diagrams with ease</li>
<li class="border-b py-4 px-4">Learn how to set up a custom documentation system</li>
<li class="border-b py-4 px-4">Learn how to implement Mermaid diagrams in your workflows</li>
<li class="border-b py-4 px-4">Understand how to set up themes for a Mermaid diagram for an entire site</li>
<li class="border-b py-4 px-4">Discover how to draw different types of diagrams such as flowcharts, class diagrams, Gantt charts, and more</li>
<li class="border-b py-4 px-4">
Understand good and bad documentation, and the art of effective documentation
</li>
<li class="border-b py-4 px-4">
Become well-versed with maintaining complex diagrams with ease
</li>
<li class="border-b py-4 px-4">
Learn how to set up a custom documentation system
</li>
<li class="border-b py-4 px-4">
Learn how to implement Mermaid diagrams in your workflows
</li>
<li class="border-b py-4 px-4">
Understand how to set up themes for a Mermaid diagram for an entire site
</li>
<li class="border-b py-4 px-4">
Discover how to draw different types of diagrams such as flowcharts, class
diagrams, Gantt charts, and more
</li>
</ul>
</div>
</div>
@@ -200,7 +298,13 @@ an object-oriented system.
</div>
</section>
<!-- Change the colour #f8fafc to match the previous section colour -->
<svg class="wave-top" viewBox="0 0 1439 147" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg
class="wave-top"
viewBox="0 0 1439 147"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1.000000, -14.000000)" fill-rule="nonzero">
<g class="wave" fill="#f8fafc">
@@ -209,13 +313,21 @@ an object-oriented system.
></path>
</g>
<g transform="translate(1.000000, 15.000000)" fill="#FFFFFF">
<g transform="translate(719.500000, 68.500000) rotate(-180.000000) translate(-719.500000, -68.500000) ">
<path d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496" opacity="0.100000001"></path>
<g
transform="translate(719.500000, 68.500000) rotate(-180.000000) translate(-719.500000, -68.500000) "
>
<path
d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496"
opacity="0.100000001"
></path>
<path
d="M100,104.708498 C277.413333,72.2345949 426.147877,52.5246657 546.203633,45.5787101 C666.259389,38.6327546 810.524845,41.7979068 979,55.0741668 C931.069965,56.122511 810.303266,74.8455141 616.699903,111.243176 C423.096539,147.640838 250.863238,145.462612 100,104.708498 Z"
opacity="0.100000001"
></path>
<path d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z" opacity="0.200000003"></path>
<path
d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z"
opacity="0.200000003"
></path>
</g>
</g>
</g>
@@ -230,15 +342,40 @@ an object-oriented system.
</div>
<h3 class="my-4 text-3xl leading-tight">
<p class="mb-4 p-shadow">Written by Knut Sveidqvist and Ashish Jain.</p>
<p class="p-shadow">Knut is the creator of Mermaid and both authors are active core team members of the Mermaid open-source project.</p>
<p class="p-shadow">
Knut is the creator of Mermaid and both authors are active core team members of the
Mermaid open-source project.
</p>
</h3>
<a href="https://www.amazon.com/Official-Guide-Mermaid-js-beautiful-flowcharts-dp-1801078025/dp/1801078025/ref=mt_other?_encoding=UTF8&me=&qid=1628153965">
<button style="background: #FFA41C;border: 1px solid #FF8F00;" class="mx-auto lg:mx-0 hover:underline bg-white text-gray-800 font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out">
<a
href="https://www.amazon.com/Official-Guide-Mermaid-js-beautiful-flowcharts-dp-1801078025/dp/1801078025/ref=mt_other?_encoding=UTF8&me=&qid=1628153965"
>
<button
style="background: #ffa41c; border: 1px solid #ff8f00"
class="
mx-auto
lg:mx-0
hover:underline
bg-white
text-gray-800
font-bold
rounded-full
my-6
py-4
px-8
shadow-lg
focus:outline-none focus:shadow-outline
transform
transition
hover:scale-105
duration-300
ease-in-out
"
>
Purchase Now on Amazon
</button>
</a>
</section>
<!--Footer-->
</body>
</html>
</html>