mermaid-live-editor - Edit, preview and share mermaid charts/diagrams

  •        498

If you want to speed up the progress for mermaid-live-editor, join the slack channel and contact knsv. Edit, preview and share mermaid charts/diagrams.

https://mermaid-js.github.io/mermaid-live-editor/
https://github.com/mermaid-js/mermaid-live-editor

Dependencies:

@analytics/google-analytics : ^0.5.3
@macfja/svelte-persistent-store : ^1.1.1
analytics : ^0.7.5
js-base64 : ^3.6.1
mermaid : ^8.11.0
moment : ^2.29.1
monaco-editor : ^0.25.2
random-word-slugs : ^0.0.2

Tags
Implementation
License
Platform

   




Related Projects

Mermaid - Generation of diagram and flowchart from text in a similar manner as markdown

  •    Javascript

Mermaid is a Javascript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development. Diagramming and documentation costs precious developer time and gets outdated quickly. But not having diagrams or docs ruins productivity and hurts organizational learning.

mermaid-cli - Command line tool for the Mermaid library

  •    Javascript

This is a command-line interface (CLI) for mermaid. It takes a mermaid definition file as input and generates an svg/png/pdf file as output. Locate how to call the mmdc executable for your preferred method i.e. Docker, Yarn, NPM, global install, etc. Try these examples to get started quickly.

Mermaid - Generation of diagram and flowchart from text in a similar manner as markdown

  •    Javascript

Generation of diagrams and flowcharts from text in a similar manner as markdown. Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code? This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.

markdown-preview-enhanced - One of the 'BEST' markdown preview extensions for Atom editor!

  •    HTML

Markdown Preview Enhanced is an extension that provides you with many useful functionalities such as automatic scroll sync, math typesetting, mermaid, PlantUML, pandoc, PDF export, code chunk, presentation writer, etc. A lot of its ideas are inspired by Markdown Preview Plus and RStudio Markdown. Feel free to ask questions, post issues, submit pull request, and request new features.

Marker - Markdown editor for linux made with GTK+-3.0

  •    C++

Marker is a markdown editor for linux made with GTK+-3.0. It provides support to view and edit markdown documents. It supports TeX math rendering with KaTeX or MathJax. It also supports Mermaid diagrams, Charter for plotting, Syntax highlighting for code blocks with highlight.js, Integrated sketch editor, Flexible export options to PDF, RTF, ODT, DOCX.


jekyll-spaceship - 🚀 A Jekyll plugin to provide powerful supports for table, mathjax, plantuml, mermaid, emoji, video, audio, youtube, vimeo, dailymotion, soundcloud, spotify, etc

  •    Ruby

Spaceship is a minimalistic, powerful and extremely customizable Jekyll plugin. It combines everything you may need for convenient work, without unnecessary complications, like a real spaceship. Add jekyll-spaceship plugin in your site's Gemfile, and run bundle install.

ReLaXed - Create PDF documents using web technologies

  •    Javascript

ReLaXed creates PDF documents interactively using HTML or Pug (a shorthand for HTML). It allows complex layouts to be defined with CSS and JavaScript, while writing the content in a friendly, minimal syntax close to Markdown or LaTeX. ReLaXed has support for Markdown, LaTeX-style mathematical equations (via MathJax), CSV conversion to HTML tables, plot generation (via Vega-Lite or Chart.js), and diagram generation (via mermaid). Many more features can be added simply by importing an existing JavaScript or CSS framework.

GoJS - JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages

  •    Javascript

GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs. GoJS is a flexible library that can be used to create a number of different kinds of interactive diagrams, including data visualizations, drawing tools, and graph editors. There are samples for flowchart, org chart, business process BPMN, swimlanes, timelines, state charts, kanban, network, mindmap, sankey, family trees and genogram charts, fishbone diagrams, floor plans, UML, decision trees, pert charts, Gantt, and hundreds more. GoJS includes a number of built in layouts including tree layout, force directed, radial, and layered digraph layout, and a number of custom layout examples.

quiver - A modern commutative diagram editor for the web.

  •    Javascript

quiver is a modern, graphical editor for commutative and pasting diagrams, capable of rendering high-quality diagrams for screen viewing, and exporting to LaTeX via tikz-cd. Creating and modifying diagrams with quiver is orders of magnitude faster than writing the equivalent LaTeX by hand and, with a little experience, competes with pen-and-paper.

live-editor - A browser-based live coding environment.

  •    Javascript

WARNING: This project is currently in maintenance mode. Please feel free to file bug reports. If determine that the issue is serious enough we will fix it. Please do not submit PRs. We don't have the resources to review them and they'll be closed.This is the live coding environment developed for the Khan Academy Computer Programming curriculum. It gives learners an editor on the left (either ACE or our Blocks-based drag-and-drop editor) and an output on the right (either JS+ProcessingJS, HTML, or SQL). Here's a tour of how it's used on KA.

railroad-diagrams - :steam_locomotive: A small JS+SVG library for drawing railroad syntax diagrams

  •    Python

This is a small library for generating railroad diagrams (like what JSON.org uses) using SVG, with both JS and Python ports. Railroad diagrams are a way of visually representing a grammar in a form that is more readable than using regular expressions or BNF. They can easily represent any context-free grammar, and some more powerful grammars. There are several railroad-diagram generators out there, but none of them had the visual appeal I wanted, so I wrote my own.

jdl-studio - JDL Studio is an online JHipster Domain Language visual editor

  •    Javascript

Hello, this is JDL-Studio, an online tool for drawing UML diagrams for JHipster based on the JDL syntax. It tries to keep its syntax visually as close as possible to the generated UML diagram without resorting to ASCII drawings. The JDL-Studio web application is a simple editor with a live preview. It is purely client side and changes are saved to the browser's localStorage, so your diagram should be here the next time, (but no guarantees).

LibreOffice - The Document foundation

  •    C

LibreOffice is the free power-packed Open Source personal productivity suite for Windows, Macintosh and Linux. LibreOffice is the perfect choice for home users, businesses, government and other organizations. It's native file format is the ISO standardized ODF (Open Document Format), but LibreOffice can open and save Microsoft Word, PowerPoint and Excel files, as well as many other formats, bringing you the widest-available compatibility with other products.

Green - Create UML diagram from code

  •    Java

green is a LIVE round-tripping editor, meaning that it supports both software engineering and reverse engineering. You can use green to create a UML class diagram from code, or to generate code by drawing a class diagram. green supports exporting files to both jpg and gif format, so that you can share you diagrams without any issues!

js-sequence-diagrams - Draws simple SVG sequence diagrams from textual representation of the diagram

  •    Javascript

Draws simple SVG sequence diagrams from textual representation of the diagram

medium-draft - A medium like Rich Text Editor built on draft-js with a focus on keyboard shortcuts

  •    Javascript

A medium like rich text editor built upon draft-js with an emphasis on eliminating mouse usage by adding relevant keyboard shortcuts.

aws-perspective - AWS Perspective is a solution to visualize AWS Cloud workloads

  •    Javascript

AWS Perspective is a tool that quickly visualizes AWS Cloud workloads as architecture diagrams. You can use the solution to build, customize, and share detailed workload visualizations based on live data from AWS. This solution works by maintaining an inventory of the AWS resources across your accounts and Regions, mapping relationships between them, and displaying them in a web user interface (web UI). v1.1.1 brings a new feature that uses AWS Cost & Usage Reports (AWS CUR) to help you identify AWS resources that have incurred a cost. You can build architecture diagrams displaying this cost information and generate Cost Reports which graph the overall cost of your workload over a configurable time period. These reports can be exported in CSV format.

Eric - Python and Ruby editor and IDE

  •    Python

Eric is a full featured Python and Ruby editor and IDE, written in python. It is based on the cross platform Qt gui toolkit, integrating the highly flexible Scintilla editor control. It is designed to be usable as everdays quick and dirty editor as well as being usable as a professional project management tool integrating many advanced features Python offers the professional coder.

react-lz-editor - A multilingual react rich-text editor component includes media support such as texts, images, videos, audios, links etc

  •    Javascript

An open source react rich-text editor ( mordern react editor includes media support such as texts, images, videos, audios, links etc. ), development based on Draft-Js and Ant-design, good support html, markdown, draft-raw mode. It's supports multiple languages well and welcome you add your language supports. Disabled media insert feature on demo page, because of there was no online API support for the time being, here is The server side API demo in java you may want.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.