mirror of
https://github.com/grafana/grafana.git
synced 2025-07-29 17:22:51 +08:00
86 lines
4.6 KiB
Markdown
86 lines
4.6 KiB
Markdown
+++
|
|
title = "Build a plugin."
|
|
+++
|
|
|
|
# Build a plugin
|
|
|
|
For more information on the types of plugins you can build, refer to the [Plugin Overview]({{< relref "../../plugins/_index.md" >}}).
|
|
|
|
## Get started
|
|
|
|
The easiest way to start developing Grafana plugins is to use the [Grafana Toolkit](https://www.npmjs.com/package/@grafana/toolkit).
|
|
|
|
Open the terminal, and run the following command in your [plugin directory]({{< relref "../../administration/configuration.md#plugins" >}}):
|
|
|
|
```bash
|
|
npx @grafana/toolkit plugin:create my-grafana-plugin
|
|
```
|
|
|
|
If you want a more guided introduction to plugin development, check out our tutorials:
|
|
|
|
- [Build a panel plugin]({{< relref "/tutorials/build-a-panel-plugin.md" >}})
|
|
- [Build a data source plugin]({{< relref "/tutorials/build-a-data-source-plugin.md" >}})
|
|
|
|
## Go further
|
|
|
|
Learn more about specific areas of plugin development.
|
|
|
|
### Tutorials
|
|
|
|
If you're looking to build your first plugin, check out these introductory tutorials:
|
|
|
|
- [Build a panel plugin]({{< relref "/tutorials/build-a-panel-plugin.md" >}})
|
|
- [Build a data source plugin]({{< relref "/tutorials/build-a-data-source-plugin.md" >}})
|
|
- [Build a data source backend plugin]({{< relref "/tutorials/build-a-data-source-backend-plugin.md" >}})
|
|
|
|
Ready to learn more? Check out our other tutorials:
|
|
|
|
- [Build a panel plugin with D3.js]({{< relref "/tutorials/build-a-panel-plugin-with-d3.md" >}})
|
|
|
|
### Guides
|
|
|
|
Improve an existing plugin with one of our guides:
|
|
|
|
- [Add authentication for data source plugins]({{< relref "add-authentication-for-data-source-plugins" >}})
|
|
- [Add support for annotations]({{< relref "add-support-for-annotations.md" >}})
|
|
- [Add support for Explore queries]({{< relref "add-support-for-explore-queries.md" >}})
|
|
- [Add support for variables]({{< relref "add-support-for-variables.md" >}})
|
|
- [Build a logs data source plugin]({{< relref "build-a-logs-data-source-plugin.md" >}})
|
|
- [Build a streaming data source plugin]({{< relref "build-a-streaming-data-source-plugin.md" >}})
|
|
- [Error handling]({{< relref "error-handling.md" >}})
|
|
- [Working with data frames]({{< relref "working-with-data-frames.md" >}})
|
|
|
|
### Concepts
|
|
|
|
Deepen your knowledge through a series of high-level overviews of plugin concepts:
|
|
|
|
- [Data frames]({{< relref "data-frames.md" >}})
|
|
|
|
### UI library
|
|
|
|
Explore the many UI components in our [Grafana UI library](https://developers.grafana.com/ui).
|
|
|
|
### Examples
|
|
|
|
For inspiration, check out our [plugin examples](https://github.com/grafana/grafana-plugin-examples).
|
|
|
|
### API reference
|
|
|
|
Learn more about Grafana options and packages.
|
|
|
|
#### Metadata
|
|
|
|
- [Plugin metadata]({{< relref "metadata.md" >}})
|
|
|
|
#### Typescript
|
|
|
|
- [Grafana Data]({{< relref "../../packages_api/data/_index.md" >}})
|
|
- [Grafana Runtime]({{< relref "../../packages_api/runtime/_index.md" >}})
|
|
- [Grafana UI]({{< relref "../../packages_api/ui/_index.md" >}})
|
|
|
|
#### Go
|
|
|
|
- [Grafana Plugin SDK for Go]({{< relref "backend/grafana-plugin-sdk-for-go" >}})
|
|
|
|
<!-- BEGIN Optimal Workshop Intercept Snippet --><div id='owInviteSnippet' style='position:fixed;right:20px;bottom:20px;width:280px;padding:20px;margin:0;border-radius:6px;background:#1857B8;color:#F7F8FA;text-align:left;z-index:2200000000;opacity:0;transition:opacity 500ms;-webkit-transition:opacity 500ms;display:none;'><div id='owInviteMessage' style='padding:0;margin:0 0 20px 0;font-size:16px;'>Got a spare two and a half minutes to help us improve the docs?</div><a id='owInviteOk' href='https://Grafana.optimalworkshop.com/questions/grafana-docs?tag=docs&utm_medium=intercept' onclick='this.parentNode.style.display="none";' target='_blank' style='color:#F7FAFF;font-size:16px;font-weight:bold;text-decoration:underline;'>Yes, I'll help</a><a id='owInviteCancel' href='javascript:void(0)' onclick='this.parentNode.style.display="none";' style='color:#F7F8FA;font-size:14px;text-decoration:underline;float:right;'>Close</a></div><script>var owOnload=function(){if(-1==document.cookie.indexOf('ow-intercept-quiz-4ior230e')){var o=new XMLHttpRequest;o.onloadend=function(){try{var o=document.getElementById('owInviteSnippet');var date=new Date();date.setMonth(date.getMonth()+1);this.response&&JSON.parse(this.response).active===!0&&(document.cookie='ow-intercept-quiz-4ior230e=Done;path=/;expires='+date.toUTCString()+';',setTimeout(function(){o.style.display='block',o.style.opacity=1},2e3))}catch(e){}},o.open('POST','https://app.optimalworkshop.com/survey_status/questions/4ior230e/active'),o.send()}};if(window.addEventListener){window.addEventListener('load',function(){owOnload();});}else if(window.attachEvent){window.attachEvent('onload',function(){owOnload();});}</script><!-- END Optimal Workshop snippet -->
|