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 preview & chart rendering app
│   │   ├── docs/              # Sample markdown and data
│   │   ├── public/
│   │   └── src/
│   │       ├── main.ts        # Entry point for md-renderer
│   │       ├── parseTest.ts
│   │       ├── style.css
│   │       ├── typescript.svg
│   │       └── ...
│   └── web/                   # Web frontend app
│       ├── docs/              # Sample markdown and data
│       └── src/
│           ├── main.ts        # Entry point for web app
│           ├── assets/        # Static assets (logo, etc.)
│           ├── types/         # Type definitions
│           ├── utils/         # Utility functions (modals, etc.)
│           └── views/         # HTML templates
├── packages/
│   └── src/
│       ├── render/
│       │   ├── renderBarChart.ts
│       │   ├── renderLineChart.ts
│       │   └── renderTable.ts
│       ├── parseCSV.ts        # CSV/DSL parser
│       ├── markdown.ts        # Markdown renderer utilities
│       └── index.ts
└── README.md

• apps/md-renderer/: Markdown preview and chart rendering app
• apps/web/: Web frontend app (with assets, utils, views, types, etc.)
• packages/src/render/: Rendering functions for bar chart, line chart, table, etc.
• packages/src/parseCSV.ts: CSV/DSL code block parsing function
• packages/src/markdown.ts: Markdown renderer and utilities
• docs/: Sample markdown and data (located under each app)

🚀 Getting Started

1. Installation

git clone https://github.com/opensource-Brainband/vizard.git
cd vizard
npm install

2. Run

For the web app:

cd apps/web
npm run dev

For the markdown renderer app:

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.

_{Made with ❤️ by vizard contributors}