A web application for graph-based visualization of markdown files. Built with JavaScript, D3.js, and CSS, it provides interactive node-link diagrams for document structure exploration.
- Interactive graph visualization of markdown content
- Drag-and-drop file upload
- Real-time graph rendering with D3.js
- Responsive design for various screen sizes
- Node.js (version 14 or higher)
- npm
-
Clone the repository:
git clone <repository-url> cd agentic-viz
-
Install dependencies:
npm install
To start the development server:
npm run devThe application will be available at http://localhost:5173.
To build the application for production:
npm run buildThe built files will be in the dist directory.
To preview the production build locally:
npm run preview- Open the application in your browser.
- Upload a markdown file using the file input.
- The application will parse the markdown and render an interactive graph visualization.
- Interact with the graph by dragging nodes, zooming, and exploring connections.
index.html- Main application entry pointsrc/main.js- Core application logicsrc/components/- UI componentsGraphRenderer.js- Handles graph rendering with D3.jsUIManager.js- Manages user interface interactions
src/services/- Business logic servicesMarkdownParser.js- Parses markdown content
public/- Static assetsassets/css/styles.css- Application stylessample.md- Sample markdown file for testing
- D3.js (
^7.8.5) - For graph visualization and SVG manipulation - Marked (
^9.1.6) - For markdown parsing - Vite (
^6.0.0) - Build tool and development server
Follow the guidelines in AGENTS.md for JavaScript, CSS, and HTML conventions.
Currently uses manual testing. Start the dev server and test file upload, graph rendering, and interactive features in the browser.
- Follow the code style guidelines in
AGENTS.md. - Test your changes manually.
- Ensure the application builds successfully.