layout, title, titleTemplate, hero, features
| layout |
title |
titleTemplate |
hero |
features |
| home |
Mermaid |
Diagramming and charting tool |
| name |
text |
tagline |
image |
actions |
| Mermaid |
Diagramming and charting tool |
JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. |
| src |
alt |
| /header.png |
Mermaid |
|
| theme |
text |
link |
| brand |
Get Started |
/intro/ |
|
|
|
|
|
| title |
details |
| ➕ Easy to use! |
Mermaid allows even non-programmers to easily create detailed and diagrams through the Mermaid Live Editor. |
|
| title |
details |
| 🎥 Video Tutorials! |
Has video tutorials for beginners and advanced users. |
|
| title |
details |
| 🏆 Award winner! |
Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!! |
|
| title |
details |
| 🧩 Integrations available! |
Use Mermaid with your favorite applications, check out the list of Integrations and Usages of Mermaid. |
|
|
<script setup>
import { VPTeamMembers } from 'vitepress/theme'
const members = [
{
avatar: '
https://avatars.githubusercontent.com/u/5837277?v=4',
name: 'Knut Sveidqvist',
title: 'Creator',
links: [
{ icon: 'github', link: '
https://github.com/knsv' },
]
},
{
avatar: '
https://avatars.githubusercontent.com/u/1912783?v=4',
name: 'Marc Faber',
title: 'Developer',
links: [
{ icon: 'github', link: '
https://gdfaber.github.io/' },
{ icon: 'linkedin', link: '
https://www.linkedin.com/in/marc-faber/' },
]
}, {
avatar: '
https://avatars.githubusercontent.com/u/1564825?v=4',
name: 'Nacho Orlandoni',
title: 'Developer',
links: [
{ icon: 'github', link: '
https://github.com/IOrlandoni' },
]
}, {
avatar: '
https://avatars.githubusercontent.com/u/6552521?v=4',
name: 'Christian Klemm',
title: 'Developer',
links: [
{ icon: 'github', link: '
https://github.com/klemmchr' },
]
}, {
avatar: '
https://avatars.githubusercontent.com/u/12032557?v=4',
name: 'Mindaugas Laganeckas',
title: 'Developer',
links: [
{ icon: 'github', link: '
https://github.com/MindaugasLaganeckas' },
]
}, {
avatar: '
https://avatars.githubusercontent.com/u/58763315?v=4',
name: 'Neil Cuzon',
title: 'Developer',
links: [
{ icon: 'github', link: '
https://github.com/NeilCuzon' },
]
}, {
avatar: '
https://avatars.githubusercontent.com/u/19526120?v=4',
name: 'Adrian Hall',
title: 'Developer',
links: [
{ icon: 'github', link: '
https://github.com/spopida' },
]
}, {
avatar: '
https://avatars.githubusercontent.com/u/53054099?v=4',
name: 'Yash Singh',
title: 'Developer',
links: [
{ icon: 'github', link: '
https://github.com/Yash-Singh1' },
]
},
]
</script>
Meet The Team
<style>
.image-container .image-src {
margin: 1rem auto;
max-width: 100%;
}
.dark .image-src{
filter: invert(1) hue-rotate(217deg) contrast(0.72);
max-width: 100%;
}
.vp-doc {
align-items: center;
flex-direction: column;
display: flex;
margin-top: 2.5rem;
}
.vp-doc h2 {
margin: 48px 0 16px;
border-top: 1px solid var(--vp-c-divider-light);
padding-top: 24px;
letter-spacing: -.02em;
line-height: 32px;
font-size: 24px;
}
</style>
