import MarkMap from ’../../components/MarkMap.astro’;

Markmap Integration with Astro#

Markmap là một công cụ tuyệt vời để tạo ra các mind map tương tác từ nội dung Markdown. Trong bài viết này, chúng ta sẽ khám phá cách tích hợp Markmap vào Astro.

Ví dụ Markmap cơ bản#

<MarkMap markdown={`# Web Development

Frontend#

Frameworks#

React
Vue.js
Angular
Svelte

Technologies#

HTML5
CSS3
JavaScript
TypeScript

Backend#

Languages#

Node.js
Python
Java
Go

Databases#

MongoDB
PostgreSQL
MySQL
Redis

DevOps#

Tools#

Docker
Kubernetes
CI/CD
AWS

Monitoring#

Prometheus
Grafana
ELK Stack`} />

Ví dụ về Learning Path#

<MarkMap markdown={`# Machine Learning Journey

Foundations#

Mathematics#

Linear Algebra
Statistics
Calculus
Probability

Programming#

Python
- NumPy
- Pandas
- Matplotlib
R
SQL

Core ML Concepts#

Supervised Learning#

Regression
- Linear Regression
- Polynomial Regression
Classification
- Logistic Regression
- Decision Trees
- Random Forest
- SVM

Unsupervised Learning#

Clustering
- K-Means
- Hierarchical
Dimensionality Reduction
- PCA
- t-SNE

Deep Learning#

Neural Networks
CNN
RNN/LSTM
Transformers

Tools & Frameworks#

Python Libraries#

Scikit-learn
TensorFlow
PyTorch
Keras

Cloud Platforms#

AWS SageMaker
Google Cloud ML
Azure ML

Advanced Topics#

MLOps#

Model Deployment
Monitoring
Version Control

Specialized Areas#

Computer Vision
NLP
Reinforcement Learning`} height=“500px” />

Ví dụ về Project Structure#

<MarkMap markdown={`# Astro Project Structure

Source Code#

Components#

Layout Components
- Header.astro
- Footer.astro
- Navigation.astro
UI Components
- Button.astro
- Card.astro
- MarkMap.astro

Pages#

index.astro
about.astro
blog/
- [slug].astro
- index.astro

Content#

Posts
- markdown files
Collections
- config.ts

Configuration#

Root Files#

astro.config.mjs
package.json
tsconfig.json
tailwind.config.cjs

Build Tools#

Vite
PostCSS
Tailwind CSS

Integrations#

Official#

@astrojs/tailwind
@astrojs/sitemap
@astrojs/svelte

Community#

astro-icon
expressive-code`} height=“450px” />

Tính năng của Markmap Component#

Component MarkMap mà chúng ta đã tạo có các tính năng sau:

Dynamic Import: Sử dụng ES modules để import markmap libraries
Responsive: Tự động điều chỉnh kích thước
Interactive: Hỗ trợ zoom, pan, và collapse/expand nodes
Dark Mode: Tự động thích ứng với dark mode
SPA Compatible: Hoạt động tốt với Astro’s client-side navigation

Cách sử dụng#

1
---
2
import MarkMap from '../components/MarkMap.astro';
3
---
4

5
<MarkMap markdown={`# Your Markdown Content
6
## Section 1
7
- Item 1
8
- Item 2
9
## Section 2
10
- Item A
11
- Item B`} />

Tùy chọn Props#

markdown: Nội dung Markdown (required)
id: ID duy nhất cho SVG element (optional)
height: Chiều cao của mind map (default: “400px”)
width: Chiều rộng của mind map (default: “100%“)

Kết luận#

Markmap tích hợp hoàn hảo với Astro và cung cấp một cách tuyệt vời để trình bày thông tin có cấu trúc dưới dạng mind map tương tác. Component này có thể được sử dụng trong blog posts, documentation, hoặc bất kỳ nơi nào bạn muốn trực quan hóa thông tin theo dạng cây.