https://github.com/opensource-brainband/vizard
CSV-like Markdown extensions for rendering charts and lightweight data visualizations
https://github.com/opensource-brainband/vizard
chart csv d3 data-visualization dsl extension graph markdown markdown-it open-source readme table typescript visualization vscode-extension
Last synced: 6 months ago
JSON representation
CSV-like Markdown extensions for rendering charts and lightweight data visualizations
- Host: GitHub
- URL: https://github.com/opensource-brainband/vizard
- Owner: opensource-Brainband
- Created: 2025-08-14T07:20:40.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-08-17T15:06:46.000Z (6 months ago)
- Last Synced: 2025-08-17T16:04:46.251Z (6 months ago)
- Topics: chart, csv, d3, data-visualization, dsl, extension, graph, markdown, markdown-it, open-source, readme, table, typescript, visualization, vscode-extension
- Language: TypeScript
- Homepage: https://opensource-brainband.github.io/vizard/
- Size: 181 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
vizard
🪄 Open Source Markdown-based Data Visualization Tool
## 📖 About
**vizard** is an open source tool that allows you to easily visualize charts and tables from CSV/DSL data within markdown documents.
Just enter your data in a code block and it will be automatically rendered as bar charts, line charts, tables, and more.
## ✨ Features
- **Automatic CSV/DSL Chart Rendering**
- **Live Preview**
- **Easy Extensibility**
- **Quick Start**
## 📁 Project Structure
```
vizard/
├── apps/
│ ├── md-renderer/ # Markdown-based renderer app
│ └── web/ # Web frontend app
├── packages/
│ └── src/
│ ├── render/ # Chart/table rendering functions
│ ├── parseCSV.ts # CSV parser
│ └── markdown.ts # Markdown utilities
└── README.md
```
- **apps/md-renderer/**: Markdown preview and chart rendering app
- **apps/web/**: Web frontend app
- **packages/src/render/**: Rendering functions for bar chart, line chart, table, etc.
- **packages/src/parseCSV.ts**: CSV code block parsing function
- **docs/**: Sample markdown and data
## 🚀 Getting Started
### 1. Installation
```bash
git clone https://github.com/opensource-Brainband/vizard.git
cd vizard
npm install
```
### 2. Run
#### For the web app:
```bash
cd apps/web
npm run dev
```
#### For the markdown renderer app:
```bash
cd apps/md-renderer
npm run dev
```
Open your browser and go to http://localhost:5173
## 📝 Chart Block Syntax
You can render charts and tables by writing a CSV code block in your markdown.
The first line (info string) can include options like `title` and `type`.
**Syntax:**
```csv title="Chart Title" type="bar"
Header1,Header2
value1,value2
...
```
**Options:**
- `title` (optional): The chart or table title.
- `type` (required): The visualization type.
- `bar` : Bar chart
- `line` : Line chart
- `table` : Table
## 🛠️ Usage
Simply enter a CSV code block in the markdown editor and the chart will be rendered automatically.
**CSV Chart Example:**
```csv title="Sales Data" type="bar"
# Only rendered as a chart in vizard, not on GitHub
Date,Sales
2021-01-01,100
2021-01-02,150
2021-01-03,120
```
## 🖼 Example
## 🤝 Contributing
1. Fork this repository.
2. Create a new branch: `git checkout -b feature/your-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin feature/your-feature`
5. Create a Pull Request.